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：指令模板如何每次更新

回答

相关问题