在文档准备好时调用 AngularJS 函数答案

【问题标题】：Call AngularJS function on document ready在文档准备好时调用 AngularJS 函数
【发布时间】：2012-12-12 10:56:46
【问题描述】：

有没有办法从 JavaScript 函数调用 Angular 函数？

function AngularCtrl($scope) {
  $scope.setUserName = function(student){  
    $scope.user_name = 'John';
  }
}

我的 HTML 中需要以下功能：

jQuery(document).ready(function(){
  AngularCtrl.setUserName();
}

这里的问题是我的 HTML 代码在页面加载时存在，因此 html 中的 ng 指令没有被编译。所以我想在加载DOM时$compile(jQuery("PopupID"));。

有没有办法在文档就绪时调用 Angular 函数？

【问题讨论】：

我不明白你的 setUserName 函数——它需要一个学生参数，但硬编码“约翰”？你能在控制器中而不是在方法中做你需要的事情吗？例如，函数 MyCtrl($scope) { $scope.user_name = 'John'; ... }。还是为时已晚？如果您使用 ng-view，也许 $viewContentLoaded 会有所帮助：stackoverflow.com/questions/11454383/…

标签： javascript angularjs

【解决方案1】：

Angular 有自己的函数来测试文档就绪。您可以进行手动引导，然后设置用户名：

angular.element(document).ready(function () {
    var $injector = angular.bootstrap(document, ['myApp']);
    var $controller = $injector.get('$controller');
    var AngularCtrl = $controller('AngularCtrl');
    AngularCtrl.setUserName();
});

为此，您需要从 html 中删除 ng-app 指令。

【讨论】：

您可以只使用$document 而不是angular.element(document)。检查docs。请注意，您需要先注入它。

【解决方案2】：

上面的答案虽然正确，但却是一种反模式。在大多数情况下，当您想要修改 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.
    }
  };
});

老实说，$document 或 angular.element 的有效使用极为罕见（无法使用指令而不仅仅是控制器），并且在大多数情况下，您最好审查您的设计。

PS：我知道这个问题很老，但仍然必须指出一些最佳实践。 :)

【讨论】：