Есть ли способ вызвать функцию Angular из функции JavaScript?
function AngularCtrl($scope) {
$scope.setUserName = function(student){
$scope.user_name = 'John';
}
}
Мне нужны следующие функции в моем HTML:
jQuery(document).ready(function(){
AngularCtrl.setUserName();
}
Проблема в том, что мой HTML-код присутствует, когда страница загружена, и, следовательно, директивы ng в html не компилируются. Поэтому я хотел бы $compile(jQuery("PopupID"));, когда DOM загружен.
Есть ли способ вызвать функцию Angular в готовом документе?
Angular имеет свою собственную функцию для проверки готовности документа. Вы можете сделать ручную загрузку, а затем установить имя пользователя:
angular.element(document).ready(function () {
var $injector = angular.bootstrap(document, ['myApp']);
var $controller = $injector.get('$controller');
var AngularCtrl = $controller('AngularCtrl');
AngularCtrl.setUserName();
});
Для этого вам нужно удалить директиву ng-app из html.
Ответ выше, хотя правильный, является анти-шаблоном. В большинстве случаев, когда вы хотите изменить DOM или дождаться загрузки DOM, а затем сделать материал (готовый документ), вы не делаете этого в контроллере, а в его функции ссылок.
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 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.
}
};
});
Всем честно, действительное использование $document или angular.element крайне редко (неспособно использовать директиву вместо простого контроллера), и в большинстве случаев вам лучше рассмотреть ваш дизайн.
PS: Я знаю, что этот вопрос старый, но все же должен был указать на некоторые лучшие практики.:)