Question

根据这个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';
      }
    }
  };
});

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>

Answer 1

这与Angular指令的工作方式有关。 scope和DOM元素之间的联系有点复杂，但长话短说，如果使用控制器，scope将立即使用initController创建属性，如果您使用link属性，则范围将仅填充后链接到DOM元素（这意味着initLink将未定义<{1}}期间的。

为了避免这些问题，请不要使用Angular's documentation中所述的ng-init指令：

ngInit的唯一合适用途是对特殊属性进行别名处理 ngRepeat的内容，如下面的演示所示。除了这种情况，你应该使用控制器而不是ngInit来初始化作用域上的值。

如果您需要ngInit上的初始属性，请坚持使用控制器。

Answer 2

使用较新版本的Angular，您可以通过向ng-init添加ng-if来解决这个问题，以便在函数可用时对其进行评估：

template: 'Link: <p ng-if="initLink" ng-init="initLink()">{{ linkmsg  }}</p>',

http://plnkr.co/edit/qGjPZ4P3OjIn8rU2cufQ?p=preview

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

2 个答案: