1

私は以下のコードを持っています:

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

次に、「メイン」div のテンプレートを処理する他のコントローラーがあります。それらのコントローラーの1つで、それが呼び出さbasketService.addItemれ、ビューが更新されますbasketCount()（それがどのように起こるか完全には理解していません。何かがトリガーされていると思います）

が呼び出されたら、addItemjQuery animate または fadeIn を実行したいと思います。ディレクティブを使用する必要があることはわかっていますが、addItem 関数を監視してから jQuery を実行するディレクティブを取得する方法がわかりません。ご覧のとおり、カスタム HTML 要素basketServiceに設定されているプロパティを公開しようとしCartController Scopeましたが、何かを追加しても HTML 要素が更新されず、ディレクティブ関数が呼び出されません。

ご協力いただきありがとうございます

これがプランカーです - http://plnkr.co/edit/gis0114bTRRJLHCdYnMG?p=preview

4

2 に答える 2

0

addItem 関数を監視してから jQuery を実行するディレクティブを取得する方法がわかりません

通常、関数ではなく、スコープ プロパティを $watch する必要があります。これを行う1つの方法は、物事を簡素化すると思います：

  • バスケット サービスでカウンター プリミティブを作成します。項目が追加されると、このプロパティが増加します。
  • バスケット サービスを参照するカート コントローラーでバスケット プロパティを作成します。
  • 数量ディレクティブの $watch('basket.counter')
  • 数量ディレクティブは新しい分離スコープを作成していないため、値は必要ありません。つまり、値だけ<div class="..." ng-controller="..." quantity>で十分です。

プランク

@ShaiRezが提案したように、分離されたスコープを使用する方法は他にもあります。分離スコープがどのように機能するかを理解する必要があり、属性を使用して分離スコープに情報を渡す必要があるため、これはより複雑ですが、ディレクティブをより再利用可能にします。

その他の観察事項:

  • getCount() 関数 (ダイジェスト サイクルごとに再評価される) の代わりに、itemCount プロパティはどうでしょうか。プロパティは、「追加」および「削除」操作の一部として更新されます。
  • あなたのplnkrは非常に大きいです。今後の質問については、最小限の例を作成することをお勧めします。（より多くの人に見てもらえるようになり、反応も早くなります）。
于 2013-02-02T06:06:41.543 に答える
0

アニメーションはディレクティブ内にある必要があります（あなたが言ったように）。

また、コントローラーは、サービスでカウントが変更されると変更されるプロパティにディレクティブをバインドする必要があります。ディレクティブで分離スコープを使用すると、それが実現します。

以下に例を示します。jQuery ロジックで css() を変更できます: http://plnkr.co/edit/Mi5QzViUgl5mS21EAKh6?p=preview

それが役に立てば幸い、

シャイ

于 2013-01-31T11:42:46.890 に答える