Funkcja wywoływania kątowego na gotowym dokumencie

Question

Czy istnieje sposób wywoływania funkcji kątowej z funkcji javascript?

function AngularCtrl($scope) { 
    $scope.setUserName = function(student){ 
    $scope.user_name = 'John'; 
    } 
} 

muszę następujące funkcje w moim html:

jQuery(document).ready(function(){ 
    AngularCtrl.setUserName(); 
} 

Problemem tutaj jest mój kod HTML jest obecny, gdy strona jest ładowana, a tym samym dyrektywy ng w HTML nie są kompilowane. więc chciałbym kompilować $ (jQuery ("PopupID")); po załadowaniu DOM.

Czy istnieje sposób wywołania funkcji kątowej na gotowym dokumencie? Czy ktoś może mi w tym pomóc?

Answer 1

Angular ma swoją własną funkcję do testowania na gotowym dokumencie. Można to zrobić ręcznie bootstrap, a następnie ustawić nazwę użytkownika:

angular.element(document).ready(function() { 
    var $injector = angular.bootstrap(document, ['myApp']); 
    var $controller = $injector.get('$controller'); 
    var AngularCtrl = $controller('AngularCtrl'); 
    AngularCtrl.setUserName(); 
}); 

Aby to zadziałało trzeba usunąć dyrektywę ng aplikacji z html.

Answer 2

Powyższa odpowiedź, choć słuszna, jest wzorem zapobiegawczym. W większości przypadków, gdy chcesz zmodyfikować DOM lub poczekać na załadowanie DOM, a następnie zrobić rzeczy (dokument gotowy), nie robisz tego w kontrolerze, ale w jego funkcji łącza.

angular.module('myModule').directive('someDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     something: '=' 
    }, 
    templateUrl: 'stuff.html', 
    controller: function($scope, MyService, OtherStuff) { 
     // stuff to be done before the DOM loads as in data computation, model initialisation... 
    }, 
    link: function (scope, element, attributes) 
     // stuff that needs to be done when the DOM loads 
     // the parameter element of the link function is the directive's jqlite wraped element 
     // you can do stuff like element.addClass('myClass'); 
     // WARNING: link function arguments are not dependency injections, they are just arguments and thus need to be given in a specific order: first scope, then element etc. 
    } 
    }; 
}); 

Szczerze mówiąc, obowiązuje stosowanie $ dokumentu lub angular.element jest niezwykle rzadkie (nie można użyć dyrektywy zamiast tylko kontroler), w większości przypadków, że jesteś lepszy od przeglądając swój projekt.

PS: Wiem, że to pytanie jest stare, ale wciąż musiałem wskazać najlepsze praktyki. :)