在文件准备时调用角函数

Is there a way to call angular function from javascript function?

有办法从javascript函数中调用角函数吗?

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

I need the following functionality in my html:

我在html中需要以下功能:

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

The problem here is my HTML code is present when page is loaded and hence the ng directives in the html are not compiled. so i would like to $compile(jQuery("PopupID")); when the DOM is loaded.

这里的问题是我的HTML代码在页面加载时出现，因此HTML中的ng指令没有被编译。所以我想要$compile(jQuery(“popular”));加载DOM时。

Is there a way to call a angular function on document ready? can anyone help me with this?

有没有一种方法可以在文档中调用角函数?有人能帮我一下吗?

2 个解决方案

#1

Angular has its own function to test on document ready. You could do a manual bootstrap and then set the username:

角有它自己的功能测试文件准备。您可以手动引导，然后设置用户名:

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

For this to work you need to remove the ng-app directive from the html.

要实现这一点，您需要从html中删除ng-app指令。

#2

The answer above although correct, is an anti-pattern. In most cases when you want to modify the DOM or wait for the DOM to load and then do stuff (document ready) you don't do it in the controller but in he link function.

上面的答案虽然正确，却是反模式。在大多数情况下，当您想要修改DOM或者等待DOM加载，然后做一些事情(准备好文档)时，您不会在控制器中做，而是在he链接函数中做。

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.
    }
  };
});

In all honesty, valid use of $document or angular.element is extremely rare (unable to use a directive instead of just a controller) and in most cases you're better of reviewing your design.

诚实、有效地使用$document或$ angle。元素是非常罕见的(不能使用指令而不仅仅是控制器)，在大多数情况下，您最好检查您的设计。

PS: I know this question is old but still had to point out some best practices. :)

PS:我知道这个问题由来已久，但还是要指出一些最佳实践。:)

#1