如何在Angular服务1.5+中使用类似$ onChanges的东西

时间:2016-06-22 12:05:14

标签: javascript angularjs angularjs-scope

我使用的是角度1.5,需要更新this repo ... 当购物车中的某些内容发生变化时,我需要调用$save()方法。如何根据Todd Motto's ES2015 style guide使用服务事件或生命周期钩子 我可以在1.5中使用$ rootScope吗?如果我想在Angular 2上迁移,它是否可以安全使用?

class NgCart {

    constructor($reactive, $window, storeService, NgCartItem) {
        'ngInject';
        store = storeService;
        this.NgCartItem = NgCartItem;
        //  $rootScope.$on('ngCart:change', function(){ // how to use it in 1.5?
        //     ngCart.$save();
        // });
        if (angular.isObject(store.get('cart'))) {
            this.$restore(store.get('cart'));
        } else {
            this.init();
        }
    }

    $onChanges($cart) { //why this works only in components?
        this.$save(); 
    }

init() {

    this.$cart = {
        shipping: null,
        taxRate: null,
        tax: null,
        items: []
    };

};

addItem(id, name, price, quantity, data) {

    var inCart = this.getItemById(id);

    if (typeof inCart === 'object') {
        //Update quantity of an item if it's already in the cart
        // inCart.quantity += quantity;
        inCart.setQuantity(quantity, false);
        // $rootScope.$broadcast('ngCart:itemUpdated', inCart);
    } else {
        var newItem = this.NgCartItem.item(id, name, price, quantity, data);
        this.$cart.items.push(newItem);
        // $rootScope.$broadcast('ngCart:itemAdded', newItem);
    }
    // $rootScope.$broadcast('ngCart:change', {});
};

getItemById(itemId) {
    var items = this.getCart().items;
    var build = false;

    angular.forEach(items, function (item) {
        if (item.id === itemId) {
            build = item;
        }
    });
    return build;
}

setShipping(shipping) {
    this.$cart.shipping = shipping;
    return this.getShipping();
};

getShipping() {
    if (this.getCart().items.length == 0) return 0;
    return this.getCart().shipping;
};

setTaxRate(taxRate) {
    this.$cart.taxRate = +parseFloat(taxRate).toFixed(2);
    return this.getTaxRate();
};

getTaxRate() {
    return this.$cart.taxRate
};

getTax() {
    return +parseFloat(((this.getSubTotal() / 100) * this.getCart().taxRate)).toFixed(2);
};

setCart(cart) {
    this.$cart = cart;
    return this.getCart();
};

getCart() {
    return this.$cart;
};

getItems() {
    // console.log("getItems()");
    // console.log(this.getCart().items);
    return this.getCart().items;
};

getTotalItems() {
    var count = 0;
    var items = this.getItems();
    angular.forEach(items, function (item) {
        count += item.quantity;
    });
    return count;
};

getTotalUniqueItems() {
    return this.getCart().items.length;
};

getSubTotal() {
    var total = 0;
    angular.forEach(this.getCart().items, function (item) {
        total += item.total;
    });
    return +parseFloat(total).toFixed(2);
};

totalCost() {

    return +parseFloat(this.getSubTotal() + this.getShipping() + this.getTax()).toFixed(2);
};

removeItem(index) {
    var item = this.$cart.items.splice(index, 1)[0] || {};
    // $rootScope.$broadcast('ngCart:itemRemoved', item);
    // $rootScope.$broadcast('ngCart:change', {});

};

removeItemById(id) {
    var item;
    var cart = this.getCart();
    angular.forEach(cart.items, function (item, index) {
        if (item.id === id) {
            item = cart.items.splice(index, 1)[0] || {};
        }
    });
    this.setCart(cart);

    // $rootScope.$broadcast('ngCart:itemRemoved', item);
    // $rootScope.$broadcast('ngCart:change', {});
};

empty() {

    // $rootScope.$broadcast('ngCart:change', {});
    this.$cart.items = [];
    $window.localStorage.removeItem('cart');
};

isEmpty() {

    return (this.$cart.items.length > 0 ? false : true);

};

toObject() {

    if (this.getItems().length === 0) return false;

    var items = [];
    angular.forEach(this.getItems(), function (item) {
        items.push(item.toObject());
    });

    return {
        shipping: this.getShipping(),
        tax: this.getTax(),
        taxRate: this.getTaxRate(),
        subTotal: this.getSubTotal(),
        totalCost: this.totalCost(),
        items: items
    }
};


$restore(storedCart) {
    var _self = this;
    _self.init();
    _self.$cart.shipping = storedCart.shipping;
    _self.$cart.tax = storedCart.tax;

    angular.forEach(storedCart.items, function (item) {
        _self.$cart.items.push(this.NgCartItem.item(item._id, item._name, item._price, item._quantity, item._data));
    });
    this.$save();
};

    $save() {
        return store.set('cart', JSON.stringify(this.getCart()));
    }
}

const name = 'NgCart';

export default angular.module(name, [
    angularMeteor,
    storeService,
    NgCartItem
]).service(name, NgCart);

0 个答案:

没有答案