有一個指令聽功能

HTML

<div id="header"> 
    <h1>The JSON Store</h1> 
    <div class="cart-info" ng-controller="CartController" quantity="basketContents"> 
     My Cart (<span class="cart-items">{{basketCount()}}</span> items) 
    </div> 
</div> 
<div id="main" ng-view></div>

的JavaScript

app.controller(
    'CartController', 
    function ($scope, basketService) { 
     $scope.basketCount = basketService.getCount; 
     $scope.basketContents = basketService.items; 
    } 
); 




app.factory('basketService', function() { 
    return { 
     getCount: function() { 
      var basket = JSON.parse((localStorage.getItem('shoppingBasket') || '{ "items": [] }')); 
      var count = 0; 
      basket.items.forEach(function (element) { 
       count += element.quantity; 
      }); 

      return count; 
     }, 

     get items() { 
      var basket = JSON.parse((localStorage.getItem('shoppingBasket') || '{ "items": [] }')); 
      var quantities = basket.items.map(function (x) { return x.quantity; }); 
      if (quantities.length > 0) { 
       var total = quantities.reduce(function (previousValue, currentValue) { return previousValue + currentValue; }); 
       return total; 
      } else { 
       return 0; 
      } 
     }, 

     addItem: function (item) { 
      var basket = JSON.parse((localStorage.getItem('shoppingBasket') || '{ "items": [] }')); 

      var itemStoredAlready = basket.items.filter(function (x) { return x.id === item.id; }).length === 1; 

      if (itemStoredAlready) { 
       var basketItem = basket.items.filter(function (x) { return x.id === item.id; })[0]; 
       basketItem.quantity += parseInt(item.quantity, 10); 
      } else { 

       var basketItem = {}; 
       basketItem.id = item.id; 
       basketItem.title = item.title; 
       basketItem.quantity = parseInt(item.quantity, 10); 

       basket.items.push(basketItem); 
      } 

      localStorage.setItem('shoppingBasket', JSON.stringify(basket)); 
     } 
    }; 
}); 




app.directive('quantity', function() { 
    var linker = function (scope, element, attrs, basketService) { 

     scope.$watch(attrs.quantity, function (value, oldValue) { 
      if (value > oldValue) { 
       alert("added"); 
      } 

     }, true); 
    }; 

    return { 
     restrict: 'A', 
     link: linker 
    }; 
});

然後我有其他的控制器，處理te 「主」div的模板。在這些控制器的一個調用basketService.addItem和觀點是basketCount()更新（我不完全瞭解這種情況發生，事情是觸發，我認爲）

當addItem叫我願做一些jQuery的動畫或淡入，我知道我必須使用一個指令，但我不明白我是如何得到指令來觀看addItem函數，然後做一些jQuery的東西。正如你所看到的，我試圖公開在中設置的basketService和自定義HTML元素中的屬性，但是當添加了某些內容時，HTML元素沒有得到更新，並且指令函數沒有被調用。

感謝您的幫助

這裏有一個Plunker - http://plnkr.co/edit/gis0114bTRRJLHCdYnMG?p=preview

來源

2013-01-31 Jon

動畫應該是一個指令內（像你說的）。

而且控制器應該將指令綁定到一個屬性，該屬性在服務中的計數發生變化時會發生變化。當在指令中使用隔離範圍時，您可以完成此任務。

下面是一個例子，你可以用你的jQuery邏輯更改CSS（）：http://plnkr.co/edit/Mi5QzViUgl5mS21EAKh6?p=preview

希望它能幫助，

夏嘉曦

來源

2013-01-31 11:42:46

我已經在這裏工作，http://plnkr.co/edit/8Zgxj4zNIQh7LJ4AxxA4?p=preview通過使它成爲一個函數，並在視圖中調用，但這一切似乎都非常複雜的新手 – Jon

我不明白我是如何得到指令看addItem函數，然後做一些jQuery的東西

通常情況下，你會想$看一個範圍屬性，而不是一個函數。這裏有一種方法可以做到這一點，我認爲簡化了一些東西：

在basketService上創建一個計數器基元。添加項目時增加此屬性。
創建引用basketService上CartController一籃子屬性
$觀看量指令
由於量指令，也沒有創造新的分離範圍（「basket.counter」），它不需要值 - 即，只是<div class="..." ng-controller="..." quantity>足以

Plnkr

還有其他的方法，如@ShaiRez建議 - 使用隔離範圍。這更復雜，因爲您需要了解隔離範圍如何工作，並且需要使用屬性將信息傳遞到隔離範圍，但它確實使您的指令更具可重用性。

其他一些意見：

取而代之的是getCount將（）函數（其中被重新評估每一個消化週期），怎麼樣的ITEMCOUNT屬性。該屬性將作爲「添加」和「刪除」操作的一部分進行更新。
您的plnkr非常大。對於未來的問題，最好創建一個最簡單的例子。（你會得到更多的人看它，你會得到更快的迴應）。

來源

2013-02-02 06:06:41

有一個指令聽功能

回答

相關問題