Question

我有一项服务factory我正在建立一个购物车系统。到目前为止一切正常，但当服务添加/删除/更新数量时，我无法更新html中的购物车商品。

这是我的工厂：

function factCart () {
    var spCart = [];
        spCart['item'] = [];
        spCart['address'] = {
            //statics value based on cliente
        };

    var service = {
        getCart:        _getCart,
        addItem:        _addItem
    };
    return service;
    /* --- */
        function _getCart() {
            return spCart;
        };

        function _addItem(newItem) {
            spCart['item'].push(newItem);
        };
};

这就是我通过指令将项目添加到购物车的方式：

function spAddItem(factCart) {
    return {
        restrict:'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                e.stopPropagation();
                var newItem = {
                    id: attrs.itemid,
                    name: itemitem,
                    value: itemvalue
                };
                factCart.addItem(newItem);
            });
        }
    }
}

这就是我将它引用到dom（controller + html）的方式：

sp.cart = factCart.getCart();

<p>Shopping Cart:</p>
<ul>
    <li ng-repeat="items in sp.cart.item">Name: {{items.name}}</li>
</ul>

项目数组正在正确更新，我已使用控制台日志进行检查，一切正常，但视图在我添加新项目，更改数量等时无法更新。。

我注意到只有在我更改视图时它才会更新。但如果我在相同的视图中，没有任何反应。

可能会发生什么？

Answer 1

问题是DOM事件不是在角度上下文中完成的，因此如果那些外部事件使范围发生变化，则需要通知角度来运行摘要以更新视图

这就是为什么angular有ng-click，ng-blur之类的事件指令，它们会在内部开始摘要

如果必须使用angular core之外的事件来更新范围，则需要使用各种方法之一，例如$apply()

  element.bind('click', function(e) {
            e.stopPropagation();
            var newItem = {
                id: attrs.itemid,
                name: itemitem,
                value: itemvalue
            };
            factCart.addItem(newItem);
            scope.$apply();// tell angular to run digest
        });

Answer 2

通过$ index添加到ng-repeat轨道，即：

<li ng-repeat="items in sp.cart.item  track by $index">Name: {{items.name}}</li>

当数据工厂更改时，AngularJs在视图中更新值

2 个答案: