我在我的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上放置了对自身的引用。最终对我有用的是在这个scope属性上设置一个手表,并在初始化后才启动我的函数。

// $scope.myGrid property will be created by the grid itself
// The grid will have a loadedRows property once initialized

$scope.$watch('myGrid', function(newValue, oldValue) {
    if (newValue && newValue.loadedRows && !oldValue) {
        initializeAllTheGridThings();
    }
});

使用未定义的值调用监视程序几次。然后,当网格创建并具有预期的属性时,可以安全地调用初始化函数。第一次使用非未定义的newValue调用观察者时,oldValue仍然是未定义的。

其他回答

如何在页面加载中执行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
};

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

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

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

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

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

我们可以使用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有几个开始执行函数的时间点。如果您正在寻找类似jQuery的

$(document).ready();

你可能会发现这个类比在angular中非常有用:

$scope.$watch('$viewContentLoaded', function(){
    //do something
});

当您想要操作DOM元素时,这个选项非常有用。它只在所有te元素加载后才开始执行。

UPD:当你想改变css属性时,上面所说的是有效的。然而,当您想测量元素属性(如宽度、高度等)时,有时它就不起作用了。在这种情况下,你可能想试试这个:

$scope.$watch('$viewContentLoaded', 
    function() { 
        $timeout(function() {
            //do something
        },0);    
});