Question

在我的服务中我有这段代码：

setInterval(function () {
    $rootScope.$apply(function () {
        cart.push({
            "Id": 4,
                "Name": "Some item",
                "Price": 4
        });
    });
}, 3000);

工作示例：http://jsfiddle.net/ko8edf32/7/

这样可以正常工作：推车更改被推送到视图。

但是，当我为购物车分配新值时，更改不会被推送到视图：

setInterval(function () {
    $rootScope.$apply(function () {
        var newcart = [{
            "Id": 4,
                "Name": "Some item " + Math.random(),
                "Price": 4
        }];

        cart = newcart;
    });
}, 3000);

示例：http://jsfiddle.net/ko8edf32/8/

这是什么原因？
解决此问题的最佳/最优雅解决方案是什么？

修改

这是我建立的工作解决方案，基于以下答案： jsfiddle.net/ko8edf32/11

Answer 1

你必须在$ scope上使用对象。

$scope.model = { cart: [] };

以下是一个工作示例：http://jsfiddle.net/56vkqygn/2/

以下是解释：What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Answer 2

我已将您的购物车改为更多＆＃34;棱角分明的＆＃34;双向数据绑定的方式。我添加了第二个控制器，以显示它在没有getters/setters的情况下一起运行的效果如何，并且通常会有一点magic

http://plnkr.co/edit/U5pUlAPJTNd9V0baSjAu?p=preview

homeApp.factory("cartService", function($rootScope) {
  var service = null
  service = {
    all: function() {
      return service.cart;
    },
    add: function(item) {
      service.total += item.Price
      service.cart.push(item);
    },
    remove: function(item) {
      service.total -= item.Price
      service.cart.splice(service.cart.indexOf(item), 1);
    },
    cartUpdated: function(newValue) {
      service.cart = newValue;
    },
    cart: [],
    total: 0
  }
  return service;
});

$ rootScope。$ apply（）忽略变量赋值

2 个答案: