Jak uruchomić funkcję w regulatorze kątowym przy gotowym dokumencie?

Question

Mam funkcję w ramach kontrolera kątowego, chciałbym, aby ta funkcja była uruchamiana na gotowym dokumencie, ale zauważyłem, że kątowe uruchamia go, gdy dom jest tworzony.

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 
} 

Ktoś wie, jak mogę to zrobić?

Answer 1

Możemy użyć metody angular.element(document).ready(), aby załączyć oddzwanianie, gdy dokument jest gotowy. Możemy po prostu dołączyć wywołania zwrotnego w regulatorze tak:

angular.module('MyApp', []) 

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

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

Answer 2

kątowa inicjuje automatycznie po DOMContentLoaded zdarzenia lub gdy angularjs skrypt jest oceniany, jeśli w tym czasie document.readyState jest ustawione na "ukończ". W tym momencie Angular szuka dyrektywy ng-app , która określa katalog główny aplikacji.

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

Oznacza to, że kod regulator będzie działał po DOM jest gotowy. To jest tylko $scope.init().

Answer 3

Zobacz ten post How to execute angular controller function on page load?
do szybkiej odnośnika:

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

ten sposób, nie trzeba czekać, aż dokument jest gotowy.

Answer 4

Oto moja próba wewnątrz zewnętrznego kontrolera przy użyciu coffeescript. Działa całkiem dobrze. Należy pamiętać, że settings.screen.xs | sm | md | lg są wartościami statycznymi zdefiniowanymi w nieobciążonym pliku, który dołączam do aplikacji. Wartości odnoszą się do Bootstrap 3 Dziennik pułapki dla tytułowych mediów rozmiarach zapytań:

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

Answer 5

miałem podobną sytuację, gdzie potrzebne do wykonywania funkcji kontrolera po widok został załadowany, a także po upływie określonego składnika 3rd partii w widoku został załadowany, zainicjowany i umieścił odniesienie do siebie na $ scope. W końcu udało mi się ustawić zegarek na tej właściwości scope i uruchomić moją funkcję 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. Następnie, gdy sieć zostanie utworzona i ma oczekiwaną właściwość, można bezpiecznie wywołać funkcję inicjalizacji. Gdy pierwszy raz watcher zostanie wywołany z nieokreśloną nową wartością, oldValue nadal będzie niezdefiniowane.

Answer 6

Kątowy ma kilka punktów czasowych, aby rozpocząć wykonywanie funkcji. Jeśli szukacie czegoś podobnego jQuery

$(document).ready(); 

można znaleźć ten analogowe kątowe być bardzo przydatne:

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

Ten jest pomocny, gdy chcemy manipulować elementów DOM.Uruchomienie rozpocznie się dopiero po załadowaniu wszystkich elementów.

UPD: To, co zostało powiedziane powyżej, działa, gdy chcesz zmienić właściwości css. Jednak czasami to nie działa, jeśli chcesz zmierzyć właściwości elementów, takich jak szerokość, wysokość, itp w tym przypadku może chcesz spróbować to:

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

Answer 7

Dlaczego nie spróbować z czego kątowe Docs wspomnieć https://docs.angularjs.org/api/ng/function/angular.element.

angular.element (zwrotna)

Używałem tego w moim $ OnInit function() {...}.

var self = this; 

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

To zadziałało dla mnie.

Answer 8

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