Chiamata funzione angolare su documento pronto

Question

C'è un modo per chiamare la funzione angolare dalla funzione javascript?

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

Ho bisogno le seguenti funzionalità nel mio html:

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

Il problema qui è il mio codice HTML è presente quando la pagina viene caricata e quindi le direttive ng del HTML non vengono compilati. quindi mi piacerebbe compilare $ (jQuery ("PopupID")); quando il DOM è caricato.

C'è un modo per chiamare una funzione angolare su documento pronto? Qualcuno mi può aiutare con questo?

Answer 1

Angolare ha una propria funzione per testare su documento pronto. Si potrebbe fare un bootstrap manuale e quindi impostare il nome utente:

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

Per farlo funzionare è necessario rimuovere la direttiva ng-app dal html.

Answer 2

La risposta sopra anche se corretta, è un anti-modello. Nella maggior parte dei casi quando si desidera modificare il DOM o attendere che il DOM venga caricato e quindi fare roba (documento pronto) non lo si fa nel controller ma nella funzione di collegamento.

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

In tutta onestà, l'uso valida di $ documento o angular.element è estremamente rara (in grado di utilizzare una direttiva invece di un controller) e nella maggior parte dei casi si sta meglio di rivedere il vostro disegno.

PS: So che questa domanda è vecchia, ma ho dovuto ancora indicare alcune best practice. :)