Wie wird die Funktion in Winkelreglern am Dokument ausgeführt?

Question

Ich habe eine Funktion in meinem Winkelregler, ich möchte, dass diese Funktion auf Dokument bereit ausgeführt wird, aber ich habe bemerkt, dass eckige es ausführt, wie das Dom erstellt wird.

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 
} 

Wer weiß, wie ich darüber gehen kann?

Answer 1

Wir können die Methode angular.element(document).ready() verwenden, um Rückrufe anzuhängen, wenn das Dokument fertig ist.

angular.module('MyApp', []) 

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

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

Answer 2

Angular initialisiert automatisch auf DOMContentLoaded Ereignis oder wenn das Angularjs Skript, wenn zu diesem Zeitpunkt ausgewertet document.readyState : Wir können einfach den Rückruf in dergleichen so Controller an ist auf "abgeschlossen" eingestellt. An dieser Stelle sucht Angular nach der ng-app Direktive, die Ihren Anwendungsstamm bezeichnet.

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

Dies bedeutet, dass der Code-Controller ausgeführt wird, nachdem das DOM bereit ist.

So ist es nur $scope.init().

Answer 3

Sehen Sie diesen Beitrag How to execute angular controller function on page load?
Für schnelles Nachschlagen:

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

Auf diese Weise, Sie müssen nicht warten, bis Dokument bereit ist.

Answer 4

Hier ist mein Versuch innerhalb eines äußeren Controllers mit coffeescript. Es funktioniert ziemlich gut. Bitte beachten Sie, dass es sich bei settings.screen.xs | sm | md | lg um statische Werte handelt, die in einer nicht-iglifizierten Datei definiert sind, die ich in die App einbeziehe. Die Werte sind nach dem Bootstrap 3 offiziellen Grenzwerte für die gleichnamige Abfrage Größen Medien:

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

Ich hatte eine ähnliche Situation, wo ich brauchte eine Controller-Funktion auszuführen, nachdem die Ansicht geladen wurde und auch nach einer bestimmten 3rd-Party-Komponente innerhalb der Ansicht wurde geladen, initialisiert und hatte einen Verweis auf sich selbst auf $ scope platziert. Am Ende funktionierte es für mich, eine Überwachung für diese Bereichseigenschaft einzurichten und meine Funktion erst zu starten, nachdem sie initialisiert wurde.

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

Der Beobachter wird ein paar Mal mit undefinierten Werten aufgerufen. Wenn das Raster dann erstellt wird und die erwartete Eigenschaft hat, kann die Initialisierungsfunktion sicher aufgerufen werden. Wenn der Watcher zum ersten Mal mit einem nicht definierten newValue aufgerufen wird, ist oldValue immer noch nicht definiert.

Answer 6

Angular hat mehrere Zeitpunkte, um mit der Ausführung von Funktionen zu beginnen. Wenn Sie so etwas wie jQuery suchen

$(document).ready(); 

Sie können die analogen in Winkel finden sehr nützlich sein:

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

Dieses hilfreich, wenn Sie die DOM-Elemente manipulieren wollen.Es wird erst ausgeführt, nachdem alle te Elemente geladen wurden.

UPD: Was oben gesagt wird funktioniert, wenn Sie CSS-Eigenschaften ändern möchten. Aber manchmal ist es nicht funktioniert, wenn Sie die Elementeigenschaften, wie Breite, Höhe, usw. In diesem Fall messen möchten sollten Sie versuchen, diese:

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

Answer 7

Warum bei nicht versuchen, was Winkel docs erwähnen https://docs.angularjs.org/api/ng/function/angular.element.

angular.element (Rückruf)

ich dies habe in meinem $ onInit verwendet() {...} function.

var self = this; 

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

Das funktionierte für mich.

Answer 8

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