Question

有没有办法从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函数？

Answer 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指令。

Answer 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：我知道这个问题很老，但仍然需要指出一些最佳实践。：）

在文档就绪时调用Angular函数

2 个答案: