Angular.js无限循环调用函数

amaik 发表于 Dev

阿玛克

我的问题在以下模板中：

<div class="container">
<h1>Process Definitions</h1>
 <table class="table table-stripped" >
    <tr>
      <td><strong>Name</strong></td>
    <td><strong>Id</strong></td>
    <td><strong>Version</strong></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr ng-repeat="def in defs | filter: global.search">
    <td>{{def.name}}</td>
    <td>{{def.id}}</td>
    <td>{{def.version}}</td>
    <td><button type="button" class="btn btn-warning" ng-click="redirectToInstance(def.id)">Instances</td>
    <!--<td><h4><small>{{'Current :' + getCount(def.id) }}</small></h4></td>-->
    <td><button type="button" class="btn btn-warning" ng-click="redirectToTasks(def.id)">Tasks</td>
  </tr> 
</table>
</div>

问题是注释标记内表达式内部的函数调用。

调用的函数在此控制器中：

BPMNControllers.controller('ProcessDefinitionCtrl', ['$scope','$location',  'ProcessDefinitions','ProcessInstances',
 function($scope,$location, ProcessDefinitions,ProcessInstances) {
$scope.defs = ProcessDefinitions.query();
$scope.redirectToInstance = function(id){$location.path('/process-definitions/' + id);};
$scope.redirectToTasks = function(id){$location.path('/tasks/def'+id)};
$scope.getCount = function (id){
    var countObj = ProcessInstances.getCount({processDefinitionId : id});
    return countObj.count;
    };
console.log('ProcessDefinitionCtrl');
  }]);

以下服务很重要，因为它正在查询rest-api。

BPMNServices.factory('ProcessInstances', ['$resource','restUrl',
function($resource,restUrl){
var url = restUrl+'engine-rest/process-instance/:id'
return $resource(url,{id:'@id'},{
  query :       {method:'GET',isArray:true},
  get :         {method:'GET'},
  getCount :    {method:'GET',url:restUrl+'engine-rest/process-instance/count'}
},{})

}]);

这导致ajax调用无限循环。我想我知道问题是异步调用，并且由于它没有直接绑定，因此调用不够快，因此被调用并再次调用。我怎样才能做到这一点？

以及所要求的ProcessDefinitions：

BPMNServices.factory('ProcessDefinitions', ['$resource','restUrl',
function($resource,restUrl){
var url = restUrl + 'engine-rest/process-definition/:id'
return $resource(url, {id : '@id'}, {
  query:    {method:'GET', isArray:true},
  get :     {method:'GET'},
  start:    {method:'POST',url:url+'/start'}
},{});
}]);

以及全局搜索过滤器的模型：

                  <input type="text" class="form-control" placeholder="Search" ng-model="global.search">

马克·克莱恩

无限循环是您观看的视图表达式调用一个函数的结果，该函数本身导致触发$ digest循环。

在带有Angular表达式绑定的无限循环中提供了一个很好的解释和另一个示例

至于您的特定代码，可以使用指令代替视图表达式：

的HTML

  <!-- results in infinite digest Count: {{getCount(def.id)}} -->
  Count: <count></count>

.directive('count', function(ProcessInstances){
  return {
    restrict: 'E',
    replace: true,
    link: function(scope) {
      scope.countRes = ProcessInstances.getCount(scope.def.id);
    },
    template: '<span>{{countRes.count}}</span>'
  }
});

演示版

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。