我在我的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.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/

Angular会在DOMContentLoaded事件或其他事件时自动初始化 如果此时document.readyState .js脚本被求值 设置为“完成”。此时,Angular会寻找ng-app 指示指定您的应用程序根。

https://docs.angularjs.org/guide/bootstrap

这意味着控制器代码将在DOM准备好之后运行。

因此它就是$scope.init()。

如果你得到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控制器函数? 快速查找:

// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};

这样,您就不必等到文档准备好了。