Question

我正在通过属性将函数传递给指令。

问题是我调用它之前触发的函数。更奇怪的问题是，只有在我声明指令的范围时才会发生这种情况。

如果不清楚，我的代码将解释：

没有明确的范围

angular.module('app', []).
controller('ctrl', function($scope){
  $scope.testString = 'test string';
  $scope.testFunction = function(text) {
    console.log(text);
  }
}).directive('test', function() {
  return {
    link: function(scope, element) {}
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <span test="testFunction(testString)">Test Directive</span>
</div>

已定义范围

angular.module('app', []).
controller('ctrl', function($scope){
  $scope.testString = 'test string';
  $scope.testFunction = function(text) {
    console.log(text);
  }
}).directive('test', function() {
  return {
    scope: {
      test: '='
    },
    link: function(scope, element) {}
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <span test="testFunction(testString)">Test Directive</span>
</div>

http://jsbin.com/hunewu/edit?html,js

另一点在已定义指令范围的情况下，为什么函数会被触发3次？

Answer 1

您不应该使用=（双向绑定）将表达式绑定（函数引用）传递给指令。理想情况下，它应该在处理此类情况时使用&（表达式绑定）。

<强>指令

.directive('test', function() {
  return {
    scope: {
      test: '&'
    },
    link: function(scope, element) {
      //then call whenever you want it
      scope.test({testString: 'myOwnString'});
    }
  };
});

CodePen

指令范围内的函数不需要被激活

1 个答案: