如何在文件准备好的angular度控制器上运行function？
我在我的angular度控制器中有一个函数，我想这个函数在文档准备运行，但我注意到，angular度运行它，因为dom创build。
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 } 任何人都知道我可以怎么做呢？
我们可以使用angular.element(document).ready()方法为文档准备就绪时附加callback。 我们可以简单地将callback附加到控制器中，如下所示：
angular.module('MyApp', []) .controller('MyCtrl', [function() { angular.element(document).ready(function () { document.getElementById('msg').innerHTML = 'Hello'; }); }]);
看到这篇文章如何执行页面加载angular度控制器function？
快速查找：
// 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会在
DOMContentLoaded事件或者当那个时候document.readyState设置为'complete'的时候评估angular.js脚本时自动初始化。 此时，Angular会查找指定应用程序根目录的ng-app指令。
https://docs.angularjs.org/guide/bootstrap
这意味着控制器代码将在DOM准备就绪后运行。
这就是$scope.init() 。
Angular有几个时间点来开始执行function。 如果你寻求像jQuery的东西
$(document).ready();
你可能会发现这个模拟器是非常有用的：
$scope.$watch('$viewContentLoaded', function(){ //do something });
当你想要操纵DOM元素时，这一点很有用。 只有在加载所有的te元素后才会开始执行。
UPD：上面说的是什么当你想改变CSS属性。 但是，有时在测量元素属性（例如宽度，高度等）时无法正常工作。在这种情况下，您可能需要尝试以下操作：
$scope.$watch('$viewContentLoaded', function() { $timeout(function() { //do something },0); });
我有一个类似的情况，我需要在视图加载后执行一个控制器函数，也是在视图中的一个特定的第三方组件被加载，初始化并且在$ 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(); } });
观察者被称为几次未定义的值。 然后，当网格被创build并具有期望的属性时，可以安全地调用初始化函数。 第一次用非未定义的newValue调用监视器时，oldValue仍然是未定义的。
这里是我使用coffeescript的外部控制器的尝试。 它工作得很好。 请注意，settings.screen.xs | sm | md | lg是我在应用程序中包含的非简化文件中定义的静态值。 这些值是根据同名媒体查询大小的Bootstrap 3官方断点：
xs = settings.screen.xs // 480 sm = settings.screen.sm // 768 md = settings.screen.md // 992 lg = settings.screen.lg // 1200 doMediaQuery = () -> w = angular.element($window).width() $scope.xs = w < sm $scope.sm = w >= sm and w < md $scope.md = w >= md and w < lg $scope.lg = w >= lg $scope.media = if $scope.xs "xs" else if $scope.sm "sm" else if $scope.md "md" else "lg" $document.ready () -> doMediaQuery() angular.element($window).bind 'resize', () -> doMediaQuery()
为什么不尝试使用https://docs.angularjs.org/api/ng/function/angular.element 。
angular.element（callback）
我在$ onInit（）{…}函数中使用了这个。
var self = this; angular.element(function () { var target = document.getElementsByClassName('unitSortingModule'); target[0].addEventListener("touchstart", self.touchHandler, false); ... });
这对我有效。
