双向绑定Angularjs bug

我的角应用程序使用多个控制器，它们都使用双向绑定，除了这一个以外，它们完全正确。出于某种原因，当我稍后更改变量时，它不更新我的angular.extend中的范围变量。这是我做的：双向绑定Angularjs bug

angular.extend($scope, { 
    cart: { 
     products: [ 
      {amount: 1, name: 'product 1', total: 4.95}, 
      {amount: 4, name: 'product 2', total: 4.95}, 
      {amount: 2, name: 'product 3', total: 4.95}, 
     ], 
     deliveryCost: 0, 
     total: 0, 
     orderContinue: false, 
    } 
});

而当我想以一个产品添加到购物车我做的：

addToCart: function(id) { 
    var newProduct = {amount: 1, name: 'product 4', total:5.94}; 
    $scope.cart.products.push(angular.extend(newProduct)); 
}

当我CONSOLE.LOG我的$ scope.cart.products在addToCart功能，它显示了新添加的产品，但后来当我想它已经在我看来更新，它只是不将产品添加到列表：

<div class="row" ng-controller="cartController"> 
<div class="col-md-12"> 
    <h4>Cart</h4> 
    <div class="row" ng-repeat="products in cart.products"> 
     <div class="col-md-2"> 
      {{products.amount}} 
     </div> 
     <div class="col-md-8"> 
      {{products.name}} 
     </div> 
     <div class="col-md-2"> 
      <a href="#">X</a> 
     </div> 
    </div> 
</div>

产品会添加类似这样的

<div ng-controller="cartController" class="col-xs-4 col-sm-2 col-lg-2" style="border: 1px solid black;"> 
    <button ng-click="addToCart(1)">Add to</button> 
</div>

我在做什么错？

来源

2016-09-28 BigBawss

为什么你使用'angular.extend'这里？对于你在做什么而言，这似乎不是必要的。你应该只能说'$ scope.carts - {cart：....}'和'$ scope.cart.products.push（{...}）'。我的直觉是，你使用angular.extend不会触发一个会导致视图更新的摘要循环。 – ryanlutgen

这是因为你有'cartController'在HTML中声明两次 - 那些控制器不共享实例，它们都创建自己的实例。 – tymeJV

你已经在html中使用了ng-controller两次。所以每个声明都会有两个不同的范围对象。在第一个控制器范围内添加以下cod。

<button ng-click="addToCart(1)">Add to</button>

如果你想看看实际上是否有两个不同的控制器。只需在控制器中安装$ scope对象。它最初将打印两次。您可以看到$ scope的对象ID为

console.log($scope.$id);

您可以看到不同的ID。

来源

2016-09-28 16:48:33

无论何时使用ng-controller指令，都会创建一个新的子作用域，并使用新的$作用域实例化控制器函数。在你的情况下，你使用两个ng控制器，因此他们将有不同的$范围。尝试在单个ng控制器下编写相同的代码，它会起作用。

供您参考Angular Docs - Understanding Controllers

来源

2016-09-28 19:13:08 prasad

双向绑定Angularjs bug

回答

相关问题