Question

我的问题出现在以下模板中：

<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调用的无限循环。我想我知道问题是异步调用，并且因为它没有直接绑定，所以调用不够快，因此调用并再次调用。我怎么能这样做？

按要求处理ProcessDefinition：

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

Answer 1

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

Infinite loop with Angular expression binding

中提供了一个很好的解释和另一个例子

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

<强> HTML

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

<强> JS

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

Demo

Angular.js调用函数的无限循环

1 个答案: