ng-init在指令的link函数内不起作用?

Sim*_*lla 2 angularjs angularjs-directive angularjs-scope

根据这个Plunkr,ng-init在一个指令中使用不会执行一个分配给内部链接范围的函数,但如果我在控制器中执行它.

有谁能解释一下?

app.js

var app = angular.module('app', []);

app.directive('linkDir', function(){
  return {
    restrict: 'E',
    scope: true,
    template: 'Link: <p ng-init="initLink()">{{ linkmsg  }}</p>',
    link: function(scope){
      scope.initLink = function(){
        scope.linkmsg = 'link function executed'
      }
    }
  };
});

app.directive('controllerDir', function(){
  return {
    restrict: 'E',
    scope: true,
    template: 'Controller: <p ng-init="initController()">{{ controllermsg  }}</p>',
    controller: function($scope){
      $scope.initController = function(){
        $scope.controllermsg = 'controller function executed';
      }
    }
  };
});
Run Code Online (Sandbox Code Playgroud)

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-app="app">
    <link-dir></link-dir>
    <controller-dir></controller-dir>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

bml*_*ite 10

这与Angular指令的工作方式有关.scopeDOM元素和DOM元素之间的联系有点复杂,但是长话短说,如果使用控制器,scope将立即使用initController属性创建,而如果使用link属性,则只会填充范围之后它被链接到DOM元素(这意味着在期间initLink将是未定义ng-init).

为了避免这些问题,请不要使用Angular文档中ngInit所述的指令:

ngInpe的唯一合适用途是用于别名ngRepeat的特殊属性,如下面的演示所示.除了这种情况,您应该使用控制器而不是ngInit来初始化作用域上的值.

如果你需要初始化属性,请坚持使用控制器scope.