Question

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

＆＃13;

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"
    ];
  }
])

＆＃13;

<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>

＆＃13;

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>

Answer 2

调用方法3次，因为placeholder属性或其他属性如class或...无法定义angularjs中的ng-，我们可以使用{ {1}}处理它。

当你运行第一个时，你有ng-init然后绑定repeat，然后你的角度属性就会运行。

为了获得最佳解决方案，我指的是使用elements作为绑定model的对象，很容易。

placeholder

var app = angular.module('myApp', [])
app.controller('myCtrl', [
  '$scope',
  function($scope){
    $scope.placeholder = "";
    $scope.randomFnc = function (tab) {
       $scope.placeholder = "Placeholder text";
    }
    
    $scope.tabs = [
      "a",
      "b",
      "c"
    ];
    
    //----2
    
    $scope.randomFnc2 = function (tab) {
      tab.placeholder = "Placeholder text";
    }
    
    $scope.tabs2 = [
      {name: "a"},
      {name: "b"},
      {name: "c"},
    ];
  }
])

ngRepeat里面的函数执行得太频繁了

2 个答案: