Angular 服务变量未在视图中更新

Question

我有以下服务：

app.service('Cart', function() {
    this.data = [];
    this.addFont = function(font) { return this.data.push(font) };
    this.removeFont = function(i) { return this.data.splice(i, 1); };
    this.count = function() { return this.data.length; };
});

以及以下指令，它显示购物车图标以及其中的商品数量：

app.directive('cartButton', ['Cart', function(Cart) {
    return {
        restrict: 'E',
        replace: true,
        template: '<button class="selection"><i class="fa fa-shopping-cart"></i> {{ Cart.count() }}</button>'
    };
}]);

但是计数器不工作，也没有错误。

如何在我的指令中访问 Cart.count()？

Answer 1

Angular 表达式根据范围求值。

尝试在作用域上设置一个函数，该函数将从 Cart:

获取计数

return {
    restrict: 'E',
    replace: true,
    template: '<button class="selection"><i class="fa fa-shopping-cart"></i> {{ getCartCount() }}</button>',
    link: function(scope) {
        scope.getCartCount = function() {
            return Cart.count();
        }
    }
};

Answer 2

试试这个：

return {
    restrict: 'E',
    replace: true,
    template: '<button class="selection"><i class="fa fa-shopping-cart"></i> {{ Cart.count() }}</button>',
    link: function(scope) {
        scope.Cart= Cart;
    }
};

您需要将其分配给范围。

Angular 服务变量未在视图中更新

Angular service variable not updated in the view

javascript

angularjs

angularjs-directive

angularjs-service