Javascript 在文档就绪时调用 AngularJS 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13838205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call AngularJS function on document ready
提问by Chubby Boy
Is there a way to call an Angular function from a JavaScript function?
有没有办法从 JavaScript 函数调用 Angular 函数？
function AngularCtrl($scope) {
$scope.setUserName = function(student){
$scope.user_name = 'John';
}
}
I need the following functionality in my HTML:
我的 HTML 中需要以下功能：
jQuery(document).ready(function(){
AngularCtrl.setUserName();
}
The problem here is my HTML code is present when page is loaded and hence the ng directives in the html are not compiled. So I would like to $compile(jQuery("PopupID"));when the DOM is loaded.
这里的问题是我的 HTML 代码在加载页面时存在，因此未编译 html 中的 ng 指令。所以我想$compile(jQuery("PopupID"));什么时候加载DOM。
Is there a way to call a Angular function on document ready?
有没有办法在文档准备好时调用 Angular 函数？
回答by asgoth
Angular has its own function to test on document ready. You could do a manual bootstrap and then set the username:
Angular 有自己的功能来测试文档就绪。您可以进行手动引导，然后设置用户名：
angular.element(document).ready(function () {
var $injector = angular.bootstrap(document, ['myApp']);
var $controller = $injector.get('$controller');
var AngularCtrl = $controller('AngularCtrl');
AngularCtrl.setUserName();
});
For this to work you need to remove the ng-app directive from the html.
为此，您需要从 html 中删除 ng-app 指令。
回答by Void
The answer above although correct, is an anti-pattern. In most cases when you want to modify the DOM or wait for the DOM to load and then do stuff (document ready) you don't do it in the controller but in he link function.
上面的答案虽然正确，但却是一种反模式。在大多数情况下，当您想要修改 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'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 all honesty, valid use of $document or angular.element is extremely rare (unable to use a directive instead of just a controller) and in most cases you're better of reviewing your design.
老实说，有效使用 $document 或 angular.element 是非常罕见的（无法使用指令而不仅仅是控制器），并且在大多数情况下，您最好检查一下您的设计。
PS: I know this question is old but still had to point out some best practices. :)
PS：我知道这个问题很老，但仍然必须指出一些最佳实践。:)
