Question

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

＆＃34;商店＆＃34;的HTML模块：

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

我知道每次用户点击“＃34;添加到购物车”时，cartData都会更新。按钮，但我不明白每次调用指令模板中的函数totalPrice（）是如何调用的。模板是否重新渲染？如果是，触发重新渲染的是什么？非常感谢你!!

Answer 1

Angular监视范围对象以进行更改，并在更改范围时重新呈现模板。以下是有关角度范围的更多信息：https://docs.angularjs.org/guide/scope。

更新：angular需要有一个要监视的范围属性，以便它可以知道重新渲染模板。您的示例中没有任何内容将该指令链接到服务中的cartData对象，因此该指令不会知道任何更新。您可能可以使用$scope.watch()和$scope.apply()的某种组合来完成此工作，但只需修改指令控制器以包含

就更简单了

$scope.data = cart.getProduct();

以下是一个有效的例子：http://jsfiddle.net/j4dhuvap/1/。

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

1 个答案: