javascript - ngRepeat 中的函数执行得太频繁

Question

我有三个 tabs，它们在 ng-include 中有不同的 html。这些选项卡使用 ng-repeat 显示。只有一个 HTML 模板包含函数调用，但它执行了 3 次(每个 ng-repeat 迭代一次)。这里有什么问题以及如何解决？

var app = angular.module('myApp', [])
app.controller('myCtrl', [
  '$scope',
  function($scope){
    $scope.randomFnc = function (i) {
      console.log(i);
      return "Placeholder text";
    }
    $scope.tabs = [
      "a",
      "b",
      "c"
    ];
  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
     <div ng-repeat="tab in tabs">
        <div ng-if="$index == 1">
          {{$index}}<input type="text" value="" placeholder="{{randomFnc($index)}}"/>
        </div>
        <div ng-if="$index != 1">{{$index}}</div>
     </div>
</div>
</div>

Answer 1

您可以使用 ng-init，但不强烈建议您这样做。您的函数调用被执行三次的原因是因为 Angular 不知道在每个摘要周期中是否有任何 $scope 值发生变化。因此该函数将在每个摘要周期中执行。在您的情况下，它将在 ng-if 条件变为真时以及在总共三个摘要周期中执行。这就是为什么无论数组中的项数如何，它都以值 1 执行 3 次的原因。

var app = angular.module('myApp', [])
app.controller('myCtrl', [
    '$scope',
    function($scope) {
        $scope.x = {};
        $scope.randomFnc = function() {
            console.log("once");
            $scope.placeholderText = "Placeholder text";
        }
        $scope.tabs = [
            "a",
            "b",
            "c"
        ];
    }
])
app.directive('trackDigests', function trackDigests($rootScope) {
    function link($scope, $element, $attrs) {
        var count = 0;

        function countDigests() {
            count++;
            $element[0].innerHTML = '$digests: ' + count;
        }
        $rootScope.$watch(countDigests);
    }
    return {
        restrict: 'EA',
        link: link
    };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <div ng-repeat="tab in tabs">
            <div ng-if="$index == 1" ng-init="randomFnc()">
                {{$index}}<input type="text" value="" placeholder="{{placeholderText}}" />
            </div>
            <div ng-if="$index != 1">{{$index}}</div>
        </div>
    </div>
    <track-digests></track-digests>
</div>