AngularJS orderBy与ngModel相同的属性引发$digest错误

AngularJS orderBy same property as ngModel throws $digest error

本文关键字：digest 错误 属性 orderBy ngModel AngularJS      更新时间：2023-09-26

当我尝试在ng-repeat中绑定到的属性orderBy时，会出现$digest错误。我认为发生这种情况是因为在一个摘要中，ng-model值正在更新，这会影响父orderBy子句。我不知道如何避开这件事。

Plunker（更新）

这显示了问题的发生。一定要打开控制台！

http://embed.plnkr.co/rGLagq/preview

JS

var options = [
    {
        name: 'test',
        isSelected: true
    }, 
    {
        name: 'another test',
        isSelected: false
    }
];

HTML

<div ng-repeat="option in options | orderBy:'-isSelected'">
        <label>
             <input type="checkbox"
                    ng-model="option.isSelected"> {{option.name}}
        </label>
    </div>

错误

Error: [$rootScope:inprog] $digest already in progress

此问题是由angular中的一个错误引起的：

https://github.com/angular/angular.js/issues/10014

希望通过以下方式解决：https://github.com/angular/angular.js/pull/9808

目标修复版本：1.3.4

确保没有像$scope这样的手动调用$apply（）或$scope$您的代码中的摘要将手动启动摘要循环。您在这里显示的代码应该是可以的。

当您以编程方式（从Angular内部）触发代码（如DOM事件）时，有时会发生inprog错误，该代码通常由外部触发器调用。这种错误通常很难处理。最好的办法是使用$timeout等待摘要完成，然后再执行任务。我已经使用$timeout修改了您的代码以提供预期的功能。请看下面的代码。要了解更多关于inprog的问题，请参阅此链接

https://docs.angularjs.org/error/$rootScope/inprog

HTML

<body ng-controller="MainCtrl">
  <div ng-repeat="option in options | orderBy:'-isSelected'">
    <label>
      <input type="checkbox" ng-click="option.selected()"> {{option.name}}
    </label>
  </div>
</body>

JS-

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
    var myScope = $scope;
    myScope.options = [];
    for (var i = 1; i <= 10; i++) {
        myScope.options.push(new function(){
            var myself = this;
            myself.name = 'Tag ' + i;
            myself.isSelected = false;
            myself.selected = function() {
                $timeout(function() {
                    myself.isSelected = !myself.isSelected;
                    myScope.$apply();
                }, 0, false);
            };
        });
    }
});
相关文章：