雙向綁定Angularjs錯誤

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函數中console.log $ 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個不同的作用域對象。 在第一個控制器作用域內添加以下cod。

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

如果要實際查看是否有兩個不同的控制器。 只需在控制器中控制台$ scope對象。 最初將打印兩次。 您可以看到$ scope的對象ID為

console.log($scope.$id);

您可以看到不同的ID。

Answer 2

每當使用ng-controller指令時，都會創建一個新的子作用域，並使用新的$ scope實例化控制器功能。 在您的情況下，您正在使用兩個ng-controller，因此它們將具有不同的$ scope。 嘗試在單個ng-controller下編寫相同的代碼，它將起作用。

供參考Angular Docs-了解控制器