문서가 준비된 AngularJS 컨트롤러에서 기능을 실행하는 방법은 무엇입니까?

각도 컨트롤러 내에 함수가 있습니다.이 함수를 문서 준비에서 실행하고 싶지만 dom이 생성 될 때 각도가 실행되는 것을 알았습니다.

 function myController($scope)
 {
     $scope.init = function()
     {
        // I'd like to run this on document ready
     }

     $scope.init(); // doesn't work, loads my init before the page has completely loaded
 }

아무도 내가 어떻게 할 수 있는지 알고 있습니까?

이 angular.element(document).ready()메소드를 사용하여 문서가 준비 될 때 콜백을 첨부 할 수 있습니다 . 다음과 같이 컨트롤러에 콜백을 간단히 연결할 수 있습니다.

angular.module('MyApp', [])

.controller('MyCtrl', [function() {
    angular.element(document).ready(function () {
        document.getElementById('msg').innerHTML = 'Hello';
    });
}]);

http://jsfiddle.net/jgentes/stwyvq38/1/

이 게시물 참조 페이지로드에서 각도 컨트롤러 기능을 실행하는 방법은 무엇입니까?
빠른 조회 :

// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};

이렇게하면 문서가 준비 될 때까지 기다릴 필요가 없습니다.

Angular는 DOMContentLoaded이벤트시 또는 angular.js 스크립트가 평가 될 때 document.readyState가 'complete'로 설정된 경우 자동으로 초기화됩니다 . 이 시점에서 Angular는 응용 프로그램 루트를 지정하는 ng-app 지시문을 찾습니다.

https://docs.angularjs.org/guide/bootstrap

이는 컨트롤러 코드가 DOM이 준비된 후에 실행됨을 의미합니다.

따라서 그것은 단지 $scope.init()입니다.

Angular에는 함수 실행을 시작하는 몇 가지 시점이 있습니다. jQuery와 같은 것을 찾고 있다면

$(document).ready();

이 아날로그가 각도로 매우 유용하다는 것을 알 수 있습니다.

$scope.$watch('$viewContentLoaded', function(){
    //do something
});

DOM 요소를 조작 할 때 유용합니다. 모든 te 요소가로드 된 후에 만 ​​실행을 시작합니다.

UPD : 위의 내용은 CSS 속성을 변경하려고 할 때 작동합니다. 그러나 너비, 높이 등과 같은 요소 속성을 측정하려는 경우 때때로 작동하지 않습니다.이 경우 다음을 시도 할 수 있습니다.

$scope.$watch('$viewContentLoaded', 
    function() { 
        $timeout(function() {
            //do something
        },0);    
});

뷰가로드 된 후와 뷰 내의 특정 타사 구성 요소가로드되고 초기화 된 후 $ scope에서 자체에 대한 참조를 지정한 후에 컨트롤러 기능을 실행 해야하는 비슷한 상황이있었습니다. 나를 위해 일한 것은이 스코프 속성에 시계를 설정하고 초기화 된 후에 만 ​​기능을 시작하는 것이 었습니다.

// $scope.myGrid property will be created by the grid itself
// The grid will have a loadedRows property once initialized

$scope.$watch('myGrid', function(newValue, oldValue) {
    if (newValue && newValue.loadedRows && !oldValue) {
        initializeAllTheGridThings();
    }
});

감시자는 정의되지 않은 값으로 몇 번 호출됩니다. 그런 다음 그리드가 만들어지고 예상 속성이 있으면 초기화 함수가 안전하게 호출 될 수 있습니다. 정의되지 않은 newValue로 감시자가 처음 호출 될 때 oldValue는 여전히 정의되지 않습니다.

다음은 coffeescript를 사용하는 외부 컨트롤러 내부의 시도입니다. 오히려 잘 작동합니다. settings.screen.xs | sm | md | lg는 앱에 포함 된 미 확대 파일에 정의 된 정적 값입니다. 값은 시사 미디어 쿼리 크기에 대한 Bootstrap 3 공식 중단 점에 따라 다릅니다.

xs = settings.screen.xs // 480
sm = settings.screen.sm // 768
md = settings.screen.md // 992
lg = settings.screen.lg // 1200

doMediaQuery = () ->

    w = angular.element($window).width()

    $scope.xs = w < sm
    $scope.sm = w >= sm and w < md
    $scope.md = w >= md and w < lg
    $scope.lg = w >= lg
    $scope.media =  if $scope.xs 
                        "xs" 
                    else if $scope.sm
                        "sm"
                    else if $scope.md 
                        "md"
                    else 
                        "lg"

$document.ready () -> doMediaQuery()
angular.element($window).bind 'resize', () -> doMediaQuery()

대답

$scope.$watch('$viewContentLoaded', 
    function() { 
        $timeout(function() {
            //do something
        },0);    
});

내가 테스트 한 대부분의 시나리오에서 작동하는 유일한 것입니다. 템플릿에서 HTML을 빌드하는 4 가지 구성 요소가 포함 된 샘플 페이지에서 이벤트 순서는 다음과 같습니다.

$document ready
$onInit
$postLink
(and these 3 were repeated 3 more times in the same order for the other 3 components)
$viewContentLoaded (repeated 3 more times)
$timeout execution (repeated 3 more times)

따라서 $ document.ready ()는 대부분의 경우 쓸모가 없습니다. 각도로 생성되는 DOM은 거의 준비가되어 있지 않기 때문입니다.

그러나 더 흥미로운 것은 $ viewContentLoaded가 실행 된 후에도 여전히 관심있는 요소를 찾을 수 없었습니다.

$ timeout이 실행 된 후에 만 ​​발견되었습니다. $ timeout의 값이 0 이었지만 실행되기 전에 거의 200 밀리 초가 걸렸으며이 스레드가 꽤 오랫동안 보류되어 있음을 나타냅니다. DOM에는 기본 스레드에 각도 템플릿이 추가 된 것 같습니다. 첫 $ document.ready ()에서 마지막 $ timeout 실행까지의 총 시간은 거의 500 밀리 초였습니다.

구성 요소 값이 설정되고 $ timeout에서 나중에 text () 값이 변경된 특별한 경우 $ timeout 값은 $ timeout 동안 요소를 찾을 수 있었지만 작동 할 때까지 증가해야했습니다. ). 타사 구성 요소 내에서 비동기로 인해 충분한 시간이 지날 때까지 텍스트보다 값이 우선합니다. 다른 가능성은 $ scope. $ evalAsync이지만 시도되지 않았습니다.

나는 여전히 DOM이 완전히 해결되었고 모든 사례가 작동하도록 조작 할 수 있다고 말하는 하나의 이벤트를 찾고 있습니다. 지금까지 임의의 시간 초과 값이 필요합니다. 기껏해야 이것이 느린 브라우저에서 작동하지 않는 kludge임을 의미합니다. 나는 작동 할 수있는 liveQuery 및 publish / subscribe와 같은 JQuery 옵션을 시도하지 않았지만 반드시 순수한 각도는 아닙니다.

와 같은 것을 얻는다면 getElementById call returns null아마도 함수가 실행 중일 수 있지만 ID가 DOM에로드 할 시간이 없었기 때문일 수 있습니다.

Will 's answer (위쪽으로)를 늦게 사용해보십시오. 예:

angular.module('MyApp', [])

.controller('MyCtrl', [function() {
    $scope.sleep = (time) => {
        return new Promise((resolve) => setTimeout(resolve, time));
    };
    angular.element(document).ready(function () {
        $scope.sleep(500).then(() => {        
            //code to run here after the delay
        });
    });
}]);

앵귤러 문서에서 https://docs.angularjs.org/api/ng/function/angular.element에 대해 언급 해보십시오 .

angular.element (콜백)

$ onInit () {...} 함수 내에서 이것을 사용했습니다.

 var self = this;

 angular.element(function () {
        var target = document.getElementsByClassName('unitSortingModule');
        target[0].addEventListener("touchstart", self.touchHandler, false);
        ...
    });

이것은 나를 위해 일했습니다.

$scope.$on('$ViewData', function(event) {
//Your code.
});