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 的模板。在它调用basketService.addItem的其中一个控制器中，视图被更新basketCount()（我不完全理解这是如何发生的，我假设某些事情正在触发）

当addItem被调用时，我想做一些 jQuery 动画或淡入淡出，我知道我必须使用指令，但我不明白我如何获得指令来观看 addItem 函数，然后做一些 jQuery 的东西。如您所见，我试图在自定义 HTML 元素basketService中设置的属性中公开一个属性，CartController Scope但是当添加某些内容时，HTML 元素没有得到更新并且指令函数没有被调用。

谢谢你的帮助

这是一个 Plunker - http://plnkr.co/edit/gis0114bTRRJLHCdYnMG?p=preview

4

2 回答 2

0

动画应该在指令内（就像你说的那样）。

并且控制器应该将指令绑定到一个属性，当服务中的计数发生变化时，该属性也会发生变化。在指令中使用隔离范围时，您可以实现这一点。

这是一个示例，您可以使用 jQuery 逻辑更改 css()：http ://plnkr.co/edit/Mi5QzViUgl5mS21EAKh6?p=preview

希望能帮助到你，

晒

于 2013-01-31T11:42:46.890 回答
0

我不明白我是如何得到指令来观看 addItem 函数然后做一些 jQuery 的东西

通常，您需要 $watch 一个范围属性，而不是一个函数。这是一种方法，我认为可以简化事情：

  • 在 basketService 上创建一个计数器原语。添加项目时增加此属性。
  • 在 CartController 上创建一个引用 basketService 的购物篮属性
  • 数量指令中的 $watch('basket.counter')
  • 因为数量指令没有创建一个新的隔离范围，所以它不需要一个值——即，就<div class="..." ng-controller="..." quantity>足够了

PLNKR

还有其他方法，比如@ShaiRez 建议的——使用隔离范围。这更复杂，因为您需要了解隔离作用域的工作原理，并且需要使用属性将信息传递到隔离作用域，但它确实使您的指令更可重用。

其他一些观察：

  • 与其使用 getCount() 函数（每个摘要周期都会重新评估），不如使用 itemCount 属性。该属性将作为“添加”和“删除”操作的一部分进行更新。
  • 您的 plnkr 非常大。对于未来的问题，最好创建一个最小的示例。（你会得到更多的人来看它，你会得到更快的响应）。
于 2013-02-02T06:06:41.543 回答