AngularJS：指令模板如何每次更新

我是angularjs的新手。我遇到以下示例，並對指令模板每次呈現的方式感到困惑。下面是代碼：AngularJS：指令模板如何每次更新

angular.module("cart",[]).factory("cart", function(){ 
    var cartData = []; 
    return{ 
    addProduct:function(id, name, price){ 
    cartData.push({count:1, id:id, price:price, name:name}) 
    }, 
    getProduct: function(){ 
    return cartData; 
    } 
    }; 
}).directive("cartSummary", function(cart){ 
    return{ 
    restrict: "E", 
    template:"cartSummary.html", 
    controller: function($scope){ 
    var cartData = cart.getProduct(); 

    $scope.totalPrice = function(){ 
     var total = 0; 
     /*some logic here*/ 
     return total; 
    } 
    } 
    } 
});

車Summary.html：

<div navbar-text>{{totalPrice()}}</div>

，並在另一模塊，我有這樣的代碼來更新cartData：

angular.module("store", ["cart"]).controller("storeCtrl", function($scope, cart){ 
/*some logic here*/ 
$scope.addToCart = function(){ 
    cart.addProduct(product.id, product.name, product.price); 
    } 
});

的在HTML 「store」模塊：

<html ng-app="store"> 
    <body ng-controller="storeCtrl"> 
    <!--some html--> 
    <cart-summary/> 
    <!--some html--> 
    <button ng-click="addToCart(item)">Add To Cart</button> 
    </body> 
</html>

我知道每次用戶點擊「添加到購物車」按鈕時cartData都會得到更新，但我不明白指令模板中的函數totalPrice（）每次都會被調用。模板是否被重新渲染？如果是，觸發重新渲染的是什麼？非常感謝！！

來源

2014-08-29 Ryan.Gao

Angular監視作用域的對象以進行更改，並在範圍更改時重新呈現模板。以下是關於角度範圍的更多信息：https://docs.angularjs.org/guide/scope。

更新：角度需要有一個範圍屬性來監視，以便它可以知道重新呈現模板。您的示例中沒有任何內容將該指令鏈接到服務中的cartData對象，因此該指令不會知道任何更新。你可能是可能會做出的$scope.watch()和$scope.apply()一些組合這項工作，但只是修改您的指令控制它的簡單得多，包括

$scope.data = cart.getProduct();

這裏有一個工作示例：http://jsfiddle.net/j4dhuvap/1/。

來源

2014-08-29 17:17:07 joemfb

但是在調用totalPrice（）之後，作用域不會改變，totalPrice（）僅在模板中被調用。這個怎麼用？實際上，謝謝 – 2014-08-29 17:36:27

，'totalPrice（）'甚至不會改變'範圍';這是一個只讀功能。我已經更新了我的答案，提供了更多細節和一個可用的jsfiddle。 – joemfb 2014-08-29 21:29:00

非常感謝喲！ – 2014-08-29 22:41:20

AngularJS：指令模板如何每次更新

回答

相關問題