我在我的angular控制器中有一个函数，我希望这个函数在文档就绪时运行，但我注意到angular在创建dom时运行它。
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
}
有人知道我该怎么做吗?
当前回答
$scope.$on('$ViewData', function(event) {
//Your code.
});
其他回答
$scope.$on('$ViewData', function(event) {
//Your code.
});
为什么不试试angular文档提到的https://docs.angularjs.org/api/ng/function/angular.element呢?
angular.element(回调)
我已经在$onInit(){…}函数。
var self = this;
angular.element(function () {
var target = document.getElementsByClassName('unitSortingModule');
target[0].addEventListener("touchstart", self.touchHandler, false);
...
});
这对我很管用。
我们可以使用angular.element(document).ready()方法来附加文档就绪时的回调函数。我们可以像这样简单地在控制器中附加回调:
angular.module('MyApp', [])
.controller('MyCtrl', [function() {
angular.element(document).ready(function () {
document.getElementById('msg').innerHTML = 'Hello';
});
}]);
http://jsfiddle.net/jgentes/stwyvq38/1/
如果你得到getElementById调用返回null这样的东西，这可能是因为函数正在运行，但是ID还没有时间加载到DOM中。
试着延迟使用Will的答案(朝向上方)。例子:
angular.module('MyApp', [])
.controller('MyCtrl', [function() {
$scope.sleep = (time) => {
return new Promise((resolve) => setTimeout(resolve, time));
};
angular.element(document).ready(function () {
$scope.sleep(500).then(() => {
//code to run here after the delay
});
});
}]);
Angular会在DOMContentLoaded事件或其他事件时自动初始化 如果此时document.readyState .js脚本被求值 设置为“完成”。此时，Angular会寻找ng-app 指示指定您的应用程序根。
https://docs.angularjs.org/guide/bootstrap
这意味着控制器代码将在DOM准备好之后运行。
因此它就是$scope.init()。
