不能使用不同的HTML元素相同的控制器

Question

你好每一個身體我有一個控制器：

app.controller('CartController', ['$scope', 'cartDataService', function($scope, cartDataService){ 
    $scope.goodsCount = cartDataService.goodsCount; 
    $scope.changeQuantity = function (quantity, id) { 
     if (quantity < 1) { 
      ngCart.removeItem(id); 
     } else { 
      ngCart.getItemById(id).setQuantity(quantity); 
     } 
     console.log(ngCart.getTotalItems()); 
     $scope.goodsCount = cartDataService.goodsCount; 
    } 
}]); 

和服務：

app.service('cartDataService', [ '$rootScope', 'ngCart', function($rootScope, ngCart) { 
    return { 
     goodsCount: ngCart.getTotalItems() 
    }; 
}]); 

（ngCart是一個模塊，它存儲貨物網存儲）

而且我在頁面的頂部視圖：

<div ng-controller="CartController" class="numerik"><% goodsCount %></div> 

並查看頁面的正文：

<div ng-controller="CartController"><% goodsCount %></div> 

當我打電話changeQuantity方法，數據到兩種意見沒有變化。我做錯了什麼，或者在這裏我應該使用其他邏輯？

Answer 1

角度服務是singleton。所以當你打電話給你的cartDataService它被實例化並設置值goodsCount什麼ngCart.getTotalItems()返回，最初它可能undefined什麼的。

下一次，當你想更新值從cartDataService.goodsCount返回初始值不改變的值

要獲得更新的價值，你稍後設置功能和調用該函數在控制器像

在服務

return { 
     goodsCount: ngCart.getTotalItems; // pass the function Not executed result. ngCart.getTotalItems() it returns executed result 
    }; 

而在控制器內部功能$scope.changeQuantity

$scope.goodsCount = cartDataService.goodsCount(); //call the function here