ng-repeat旁边的表达使得转发器意外地再次发生

Question

请参阅 Javascript控制台警告以查找问题（包含摘录）

(function() {
  var app = angular.module('app', []);
  app.controller('MainController', function() {
    var ctrl = this;

    ctrl.data = [{
      name: "John",
      number: 1
    }, {
      name: "Alice",
      number: 2
    }];

    ctrl.nextLetter = function(startChar, index) {
      var letter = String.fromCharCode(startChar.charCodeAt(0) + index);
      console.log("nextLetter() executed: " + letter);
      return letter;
    };

    ctrl.junk = function() {
      console.warn("some junk function invoked without changing any data!");
      console.warn("why nextLetter() execute again ( see below ) ?!");
    };
  });

  app.directive('uSample', function() {
    return {
      restrict: 'E',
      transclude: true,
      template: '<div ng-transclude></div>',

      scope: {
        letter: '@'
      },

      link: function(scope) {
        console.log("Do something with " + scope.letter + " in u-sample");
      }
    }
  });
})();

u-sample {
  display: block;
  background-color: #88f;
  margin: 10px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainController as c">
    <u-sample letter="{{c.nextLetter('i', $index)}}" ng-repeat="item in c.data">
      <span>{{item.name}} ( {{item.number}} )</span>
    </u-sample>

    <button ng-click="c.junk()">Do Junk Function</button>
  </div>
</div>

Answer 1

解决我自己的问题：

1. 包括angular.js 1.4.3（旧版本可能不起作用）
2. 提供nextLetter过滤器（过滤器不会自动触发$digest）
3. 绑定{{'i' | nextLetter:$index}}而不是{{c.nextLetter('i', $index)}}

代码段已更新

＆＃13;
＆＃13;
(function() {
  var app = angular.module('app', []);
  
  app.filter('nextLetter', function(){
    return function(startChar, index){
      var letter = String.fromCharCode(startChar.charCodeAt(0) + index);
      console.log("nextLetter() executed: " + letter);
      return letter;
    }
  });
  
  app.controller('MainController', function() {
    var ctrl = this;

    ctrl.data = [{
      name: "John",
      number: 1
    }, {
      name: "Alice",
      number: 2
    }];

    ctrl.junk = function() {
      console.warn("some junk function invoked without changing any data!");
      console.warn("no nextLetter() execute again ( problem solved! ) ");
    };
  });

  app.directive('uSample', function() {
    return {
      restrict: 'E',
      transclude: true,
      template: '<div ng-transclude></div>',

      scope: {
        letter: '@'
      },

      link: function(scope) {
        console.log("Do something with " + scope.letter + " in u-sample");
      }
    }
  });
})();
＆＃13;
u-sample {
  display: block;
  background-color: #88f;
  margin: 10px;
  padding: 10px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainController as c">
    <u-sample letter="{{'i' | nextLetter:$index}}" ng-repeat="item in c.data">
      <span>{{item.name}} ( {{item.number}} )</span>
    </u-sample>

    <button ng-click="c.junk()">Do Junk Function</button>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;