Question

我的角度应用程序使用多个控制器，所有这些控制器都使用双向绑定完全正常，除了这个。出于某种原因，当我稍后更改变量时，它不会更新angular.extend中的范围变量。这就是我的所作所为：

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));
}

当我在addToCart函数中调用我的$ scope.cart.products时，它显示了新添加的产品，但是当我想在我的视图中更新它时，它只是没有添加产品到列表中：

<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>

我做错了什么？

Answer 1

您在html中使用了两次ng-controller。因此每个声明将有2个不同的范围对象。在第一个控制器范围内添加以下鳕鱼。

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

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

console.log($scope.$id);

你可以看到不同的ID。

Answer 2

每当使用ng-controller指令时，都会创建一个新的子作用域，并使用新的$ scope实例化控制器函数。在您的情况下，您使用两个ng控制器，因此它们将具有不同的$ scope。尝试在单个ng-controller下编写相同的代码，它可以正常工作。

供参考Angular Docs - Understanding Controllers

双向绑定Angularjs bug

2 个答案: