AngularJs：如何对函数执行 $watch 以避免错误：达到 $digest() 迭代

Question

我有一个物品清单。可以选择列表的每个项目。如果我选择该项目，它将被推送到 cookie 中。

在我的 home.html 中（这里有可以添加到 cookie 中的项目的列表）

<table class="table" >

        <tr  data-ng-repeat="item in items">                       
            <td><span >{{item.title}}</span></td>
            <td> <button data-ng-click="addToCookies(item)" data-ng-disabled="item.added" class="btn">
    <span data-ng-show="!item[$index].added" class="text-center">Add To cookies</span>
    <span data-ng-show="item[$index].added" class="text-center">Added To cookies</span>
            </button>             
        </td> 
        </tr>
        <tr></tr>   
    </table>

在 cookies.html 页面中，我调用 getCookiesItem() 和指令：

 <div class="navbar navbar-right" data-ng-controller="ctrlItemsList">
        <div data-item-list data-items="getCookiesItem()" ></div>      
    </div> 

在我的控制器中我做了：

//添加在 Cookie 中选择的元素

   $scope.addToCookies = function (item){
                    item.added=true;
                angular.extend($scope.criteria, item);          
                cookiesItems.addItem($scope.criteria);
            }

//获取 ELEMENTS COOKIE（也许我必须注意一下这个功能）

  $scope.getCookiesItem = function (){          
        return  cookiesItems.getItems();

   }

在我的服务中，我有：

Cservices.factory('cookiesItems', ['$cookieStore', function($cookieStore) {   
    var items = [];             
    return {
        addItem: function( itemSelected){
            var array = [];
            if ($cookieStore.get('key') === undefined) {    
                $cookieStore.put('key', []);
            }else{
                array = $cookieStore.get('key');   
            }
            array.push(itemSelected);
            $cookieStore.put('key', array);
        },

        removeItem: function(itemSelected){
            var array = $cookieStore.get('key');
            if(array != undefined){
                for (var i = 0; i < array.length; ) {
                    if (array[i].id=== itemSelected.id) {                       
                        array.splice(array[i], 1);                      
                    } else {
                        ++i;
                    }
                }
            }
            $cookieStore.put('key', array);
        },
        getItems: function(){
            return $cookieStore.get('key');
        }

元素 cookie 在以下指令中打印：

模板：

 <table class="table" >     
            <tr  data-ng-repeat="item in items">
            <td>{{item.title}}</td>                             
            </tr>
            <tr></tr>   
        </table>

在js中：

iDirective.directive('itemList', function() {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
            items: '=items'

        }

        templateUrl: ''
    };
});

我有以下错误：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: parentValueWatch; newVal: [{

当我尝试在 cookie 中添加 10' 元素时出现此错误（我只能存储 9 个元素）：Cookie '' possibly not set or overflowed because it was too large (4263 > 4096 bytes)! -

我无法解决它..有人可以帮助我吗？

谢谢

Answer 1

如果您能整理一个 jsfiddle 示例，将会很有帮助。

从您的代码中，我可以看到以下问题。 在 ng-repeat 部分中，要么应该使用 'items[$index]' 要么只使用 'item'。

<table class="table" >

    <tr  data-ng-repeat="item in items">                       
        <td><span >{{item.title}}</span></td>
        <td> <button data-ng-click="addToCookies(item)" data-ng-disabled="item.added" class="btn">
<span data-ng-show="!item.added" class="text-center">Add To cookies</span>
<span data-ng-show="item.added" class="text-center">Added To cookies</span>
        </button>             
    </td> 
    </tr>
    <tr></tr>   
</table>

addToCookies 方法到底在做什么？什么是 $scope.criteria 对象？看起来您总是在 cookieItems 中修改和添加相同的对象。

  $scope.addToCookies = function (item){
                item.added=true;
            angular.extend($scope.criteria, item);     // what is $scope.criteria?   
            cookiesItems.addItem($scope.criteria);     // will always the same object added to the cookieItems?
            $scope.selectedItems.push(item);           // why do you have a second list and why you add 'item' and not 'criteria'?
        }