函数在ng-bind，多重调用？

问题描述：

我无法找到堆栈或谷歌的答案
为什么在函数功能？函数在ng-bind，多重调用？

HTML：

<li ng-if="byProviders" ng-repeat="(key, value) in byProviderGames | groupBy: 'provider'"> 
    <p ng-bind="providersNames(key)"></p> 
</li>

控制器：

$scope.providersNames = function providersNames(key) { 
    // providersObject's length is 8 
    var index = $scope.providersObject.findIndex(function(x){ return x.name == key }); 

    // Call more then 1000 times 
    console.log($scope.gamesProviders[index]); 

    var title = $scope.providersObject[index].title; 
    return title; 
}

可以请你添加更多的代码的，是内部的NG-重复？控制器是否在指令中使用？由于消化循环的作用方式，函数至少会被调用两次。还有其他因素，如上面的问题。 – alphapilgrim

@alphapilgrim我编辑我的代码。是的，它的内部或者重复，控制器被用于1000次的指令和函数中，但它应该被称为8次。 –

是使用相同控制器的其他指令或视图吗？ – alphapilgrim

答

从ngBindsource code我们可以看到，这个指令注册一个ngBindWatchAction回调改变element.textContent每当ng-bind属性使用scope.$watch变化：

scope.$watch(attr.ngBind, function ngBindWatchAction(value) { 
    element.textContent = stringify(value); 
});

作为scope.$watch方法的第一个参数使用的watchExpression在每次调用$digest()（至少1次）时调用，并返回将被监视的值（但可以多次执行以检查模型没有被其他观察者改变）。 This is mentioned in the docs：

是多次调用你的watchExpression准备，因为它会在一个$执行多次消化周期，如果一个变化是检测。

在这个例子中$scope.getName方法将被调用11次，直到其返回值趋于稳定：

angular.module('bindExample', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
     $scope.name = 'Arik'; 
 
     $scope.count = 0; 
 
     
 
     $scope.getName = function() { 
 
     if ($scope.count < 10) { $scope.count++; } 
 
     console.log($scope.count); 
 
     return $scope.name + $scope.count; 
 
     }; 
 
     
 
    }]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body ng-app="bindExample"> 
 
<div ng-controller="ExampleController"> 
 
    Hello <span ng-bind="getName()"></span>! 
 
</div> 
 
</body>

答

有两件事情可以做，以帮助表现又如何它会影响函数被调用的次数。

首先，您可以将一个track by $index语句添加到ng-repeat的结尾处。它最终会看起来像这样。

ng-repeat="(key, value) in byProviderGames | groupBy: 'provider' track by $index"

其次，如果只是显示数据而没有其他交互发生，您可以将它们从范围中解除绑定。所以它不再肮脏检查更改。它最终会看起来像这样。

ng-repeat="(key, value) in ::byProviderGames | groupBy: 'provider'"

超级大国它与两者。

ng-repeat="(key, value) in ::byProviderGames | groupBy: 'provider' track by $index"

你甚至可以去解除实际值。

<p ng-bind="::providersNames(key)"></p>

我包含一个代码笔，因此您可以看到该函数调用了多少次。无处不像你上面指出的那样。希望能帮助到你。CodePen

拆散，适当地（一次性结合）已知https://docs.angularjs.org/guide/expression]

一次性结合与::被认为是一次性的表达式开始的表达式。一次性表达式一旦稳定就会停止重新计算，如果表达式结果是一个非未定义的值（见下面的数值稳定算法），则会在第一次摘要后发生。

function exampleController($scope) { 
 
    $scope.exampleArray = [1, 2, 3, 4]; 
 
    var exampleLookupArray = [ 
 
    { name: "Schnauzer" }, 
 
    { name: "Dachshund" }, 
 
    { name: "German Shepard" }, 
 
    { name: "Doberman Pinscher" } 
 
    ]; 
 
    $scope.breedLookUp = function(key) { 
 
    console.count(); 
 
    return exampleLookupArray[key-1].name; 
 
    }; 
 
} 
 

 
angular 
 
    .module("example", []) 
 
    .controller("exampleController", exampleController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div class="container-fluid" ng-app="example"> 
 
    <div class="container" ng-controller="exampleController"> 
 
    <div ng-repeat="ex in ::exampleArray track by $index"> 
 
     <span ng-bind="::breedLookUp(ex)"></span> 
 
    </div> 
 
    </div> 
 
</div>

函数在ng-bind，多重调用？

相关推荐