javascript - angularjs $watchCollection 方法如何保留 oldCollection 引用？

Question

我在屏幕上有一个“添加项目”按钮，单击它可以将新项目添加到列表中。

我使用 $scope.$watchCollection 来观察返回所有可见项列表的函数。

当我点击“添加项目”按钮时，我收到无限摘要循环错误。似乎 $watchCollection 克隆了列表，然后 newCollection 总是不等于 oldCollection。

JS Bin 演示: https://jsbin.com/mavolecipu/1/edit?html,js,output

function MainController($scope) {
        var ctrl = this;
        var _index = 1;
        var _visibleItems = [];
        var _allItems = [];



        ctrl.addItem = addItem;
        ctrl.visibleItems = [];


        $scope.$watchCollection(getVisibleItem, function (newVal, oldVal) {
          // it looks like the newVal is always not equal oldVal?? 
          if(newVal!== oldVal){
               ctrl.visibleItems = newVal;
           }

        });


        function addItem() {

            _allItems.push({
                index: _index,
                isVisible: true
            });


            _index = _index+1;

        }


        function getVisibleItem() {
            var newVisibleItems = _(_allItems).filter({isVisible: true}).value();

            // use same reference
            _visibleItems.length = 0;

            _.merge(_visibleItems, newVisibleItems);

            return _visibleItems;
        }

    }

Answer 1

您的问题是每次摘要循环运行时，getVisibleItem叫做。该函数清除 _visibleItems然后通过 _.merge 将所有内容添加回它.因为_.merge对项目进行深度复制(从而使它们成为不同的引用)，它会触发 $watchCollection ，这将包括另一个被触发的摘要循环，导致摘要循环的无限循环。

而不是清除 _visibleItems然后将项目添加回其中，我建议您实际添加/删除可见性已更改的项目(即删除 _visibleItems 中具有 isVisible=false 的项目，并添加仅在 _allItems 中的项目)用 isVisible=true 。

或者，替换 _.merge(_visibleItems, newVisibleItems)使用简单的 for 循环或 [].push.apply(_visibleItems, newVisibleItems将解决您的问题。