Angular JS:“Uncaught Error:10 $ digest()迭代到达。中止!Watchers在最近5次迭代中被解雇”

时间:2014-09-08 13:26:50

标签: angularjs angularjs-filter

我的项目中出现此错误。实际上,我已经使用角度Js中的过滤器实现了分页,同时使用分页加载表并且还在$ scope中显示错误。$ apply()位于MainController中。

控制台中有两个错误,

一个是"错误:达到10 $ digest()迭代。中止&#34!;

和另一个:"未捕获错误:达到10 $ digest()迭代。中止! 观察者在最后5次迭代中被解雇:[[" fn:function(context){\ n for(var i = 0,ii = length,part; i ...]]"

他们似乎在一起。过滤器中的paginate()重复调用多次。 怎么解决?任何帮助将不胜感激。

以下是用于分页的filter.js

   var filters = angular.module('OptimaQuote.filters', []);

   filters.filter('filterDependant', function () {
    return function (input, dependant) {
    var out = [];
    if (!jQuery.isEmptyObject(input) && input != "undefined" && input && input.length) {
        for (var i = 0; i < input.length; i++) {
            if (input[i].Dependant == dependant){
                out.push(input[i]);
            }
        }
    }
    return out;
  };
  });
  filters.filter('paginate', function() {
return function(input, currentPage,rowsPerPage) {
    if (!input) {
        return input;
    }

    return input;
   }
  });

    filters.filter('getPaginator', function() {
    return function(input, totolRowCount,rowsPerPage,paginatorSize,currentPage) {       
    var pageList = [];
    var pages = [];

    var noOfPages = parseInt(totolRowCount) / rowsPerPage;


     function makePage(number, text) {
            return {
              number: number,
              text: text,
            };
          }
    var startPage = 1;
    var endPage = noOfPages;
    if(noOfPages!= null && noOfPages!= "undefined"){
    if(paginatorSize < noOfPages){

         startPage = ((Math.ceil(currentPage / paginatorSize) - 1) * paginatorSize) + 1;

         endPage = Math.min(startPage + paginatorSize - 1, noOfPages);
    }   
   }

     // Add page number links
    for (var number = startPage; number <= endPage; number++) {
      var page = makePage(number, number);
      pages.push(page);
    }

    // Add links to move between page sets
    if ( paginatorSize < noOfPages ) {
      if ( startPage > 1 ) {
        var previousPageSet = makePage(startPage - 1, '...');
        pages.unshift(previousPageSet);
      }

      if ( endPage < noOfPages ) {
        var nextPageSet = makePage(endPage + 1, '...');
        pages.push(nextPageSet);
      }
    }



    return pages;
}
  });

   filters.filter('getEndPage', function() {
   return function(input, totolRowCount, rowsPerPage) {

    totalPages = [];

    function makePage(number, text) {
        return {
          number: number,
          text: text,
        };
      }

    var noOfPages = parseInt(totolRowCount) / rowsPerPage;
    var temp = makePage(noOfPages,noOfPages);
    totalPages.push(temp);
    return totalPages;

}

});

以下是用于通过调用过滤器实现分页的模板

    <tfoot>
    <tr>
        <td colspan="{{this.paginatorColSpan}}">
            <div>
                <ul class="paginate">
                <li><a ng-class="" ng-click="{{this.firstPageClick}}">First</a></li>
                    <li><a ng-class="{firstPage:{{this.currentPageNumber}}+1==1}" ng-click="{{this.prevClick}}">Previous</a></li>
                    <li ng-repeat="value in pageList|getPaginator:{{this.totalRowCount}}:{{this.pageSize}}:{{this.paginatorSize}}:{{this.currentPageNumber}}+1">
                    <a ng-class="{active: value.number=={{this.currentPageNumber}}+1}" ng-click="{{this.pageClick}}">[[value.text]]</a>
                    </li> 
                    <li ng-repeat="value in pageList|getEndPage:{{this.totalRowCount}}:{{this.pageSize}}">
                    <a ng-class="{firstPage:{{this.currentPageNumber}}+1==value.number}" ng-click="{{this.nextClick}}">Next</a></li>
                    <li ng-repeat="value in pageList|getEndPage:{{this.totalRowCount}}:{{this.pageSize}}">
                    <a ng-class=""  ng-click="{{this.pageClick}}">Last</a></li>

                </ul>
            </div>
        </td>
    </tr>
</tfoot>

2 个答案:

答案 0 :(得分:0)

尝试

{firstPage:((currentPageNumber+1)==1)}

而不是

{firstPage:{{this.currentPageNumber}}+1==1}

在其他任何地方{{}},我看到totalRowCount和currentPageNumber以及pageSize和ngClick。

你能创建一个问题的jsFiddle吗?看来你的角度不正确。

答案 1 :(得分:-1)

在我解决这个问题之前,就像这样:

 {
    field : 'appId',
    cellTemplate : '<a href="javascript:void(0);" ng-click="modify(row.entity)" style="color:Blue">Edit</a><a href="#" ng-click="review(row.entity)" style="margin:5px;color:Blue">View</a>',
    displayName : 'operation'
 }

我解决了这个问题之后就是这样:

 {
    field : 'appId',
    cellTemplate : '<a href="javascript:void(0);" ng-click="modify(row.entity)" style="color:Blue">Edit</a><a href="javascript:void(0);" ng-click="review(row.entity)" style="margin:5px;color:Blue">View</a>',
    displayName : 'operation'
 }

如果您想在此cellTemplate中使用<a></a>,则可以使用<a href="javascript:void(0);" > </a>代替<a href="#" > </a><a href=""></a>。它对我有用!