28

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

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

我的 HTML 中需要以下功能：

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

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

有没有办法在准备好的文档上调用 Angular 函数？

4

2 回答 2

45

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

于 2012-12-20T09:13:33.023 回答
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：我知道这个问题很老，但仍然必须指出一些最佳实践。:)

于 2016-11-08T13:44:42.537 回答