Jak uruchomić funkcję w sterowniku kątowym w trybie document ready?

Zobacz ten post Jak wykonać funkcję kontrolera kątowego przy ładowaniu strony?
Dla szybkiego wyszukiwania:

// 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
};

W ten sposób nie musisz czekać, aż dokument będzie gotowy.

Angular inicjalizuje się automatycznie po zdarzeniu DOMContentLoaded lub gdy kanciasty.skrypt js jest oceniany, jeśli w tym czasie dokument.readyState jest ustawione na 'complete'. W tym momencie Angular szuka ng-app dyrektywa, która wyznacza root Twojej aplikacji.

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

Oznacza to, że kod kontrolera zostanie uruchomiony po tym, jak DOM będzie gotowy.

Więc jest po prostu $scope.init().

Angular ma kilka punktów czasowych, aby rozpocząć wykonywanie funkcji. Jeśli szukasz czegoś takiego jak jQuery

$(document).ready();

Ten analog w angular może okazać się bardzo przydatny:

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

Ten jest pomocny, gdy chcesz manipulować elementami DOM. Rozpocznie wykonywanie dopiero po załadowaniu wszystkich elementów te.

UPD: to, co zostało powiedziane powyżej, działa, gdy chcesz zmienić właściwości css. Czasami jednak nie działa, gdy chcemy mierzyć właściwości elementu, takie jak jako szerokość, wysokość itp. W tym przypadku możesz spróbować tego:

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

Miałem podobną sytuację, w której musiałem wykonać funkcję kontrolera po załadowaniu widoku, a także po załadowaniu, zainicjowaniu i umieszczeniu odniesienia do siebie na $scope. To, co skończyło się dla mnie pracą, to skonfigurowanie zegarka na tej właściwości scope i uruchomienie mojej funkcji dopiero po jej zainicjowaniu.

// $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();
    }
});

Obserwator jest wywoływany kilka razy z niezdefiniowanymi wartościami. Wtedy gdy siatka jest tworzona i ma właściwość oczekiwana, funkcja inicjalizacyjna może być bezpiecznie wywołana. Przy pierwszym wywołaniu kontrolera z nieokreśloną newValue, oldValue nadal będzie niezdefiniowany.

Oto moja próba wewnątrz zewnętrznego kontrolera za pomocą coffeescript. Działa dość dobrze. Należy pamiętać, że ustawienia.ekran.xs / sm / md / lg są wartości statyczne zdefiniowane w nie-brzydkie pliku dołączam do aplikacji. Wartości są dla Bootstrap 3 oficjalnych punktów przerwania dla tytułowego rozmiaru zapytań o media:

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()

Odpowiedź

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

Jest jedynym, który działa w większości scenariuszy, które testowałem. Na przykładowej stronie z 4 komponentami, z których wszystkie budują HTML z szablonu, kolejność zdarzeń wynosiła

$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)

Więc $dokument.ready() jest bezużyteczne w większości przypadków, ponieważ DOM budowany w angular może nie być w pobliżu ready.

Ale co ciekawsze, nawet po uruchomieniu $viewContentLoaded element zainteresowania nadal nie został znaleziony.

Dopiero po wykonaniu $timeout został znaleziony. Zauważ, że chociaż $timeout był wartością 0, upłynęło prawie 200 milisekund przed jego wykonaniem, co wskazuje, że ten wątek był wstrzymywany przez dłuższy czas, prawdopodobnie podczas gdy DOM miał szablony kątowe dodane do głównego wątku. Całkowity czas Od pierwszego dokumentu$.ready() do ostatniego wykonania $timeout było prawie 500 milisekund.

W jednym wyjątkowym przypadku, gdy wartość komponentu została ustawiona, a następnie wartość text () została zmieniona później w $timeout, wartość $ timeout musiała być zwiększana dopóki nie zadziałała (mimo że element można było znaleźć podczas $timeout). Coś asynchronicznego wewnątrz komponentu 3rd party spowodowało, że wartość ma pierwszeństwo przed tekstem, dopóki nie upłynie odpowiedni czas. Inną możliwością jest $scope.$evalAsync, ale nie został wypróbowany.

Wciąż szukam tego jednego wydarzenia, które mówi mi, że DOM całkowicie się ustatkował i może być manipulowany, aby wszystkie sprawy działały. Na razie konieczna jest dowolna wartość timeout, oznacza to, że w najlepszym razie jest to kludge, który może nie działać na powolnej przeglądarce. Nie próbowałem opcji jQuery, takich jak liveQuery i publish / subscribe, które mogą działać, ale na pewno nie są czyste kanciaste.

Dlaczego nie spróbować z co angular docs wspomnieć https://docs.angularjs.org/api/ng/function/angular.element .

Kątowe.element (callback)

Użyłem tego w moim $onInit () {...} funkcja.

 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.
});