Question

我有这项服务

class NgCartItem {
constructor($reactive,  $log) {
    'ngInject';
    this.$log = $log;
};

item (id, name, price, quantity, data) {
    this.setId(id);
    this.setName(name);
    this.setPrice(price);
    this.setQuantity(quantity);
    this.setData(data);
    // how to return here real object not toObject function????
    // to work properly with inCart.setQuantity(quantity, false);
    return this.toObject();

};


setId(id) {
    if (id) this._id = id;
    else {
        this.$log.error('An ID must be provided');
    }
};

getId() {
    return this._id;
};
setQuantity(quantity, relative) {
    var quantityInt = parseInt(quantity);
    if (quantityInt % 1 === 0) {
        if (relative === true) {
            this._quantity += quantityInt;
        } else {
            this._quantity = quantityInt;
        }
        if (this._quantity < 1) this._quantity = 1;

    } else {
        this._quantity = 1;
        this.$log.info('Quantity must be an integer and was defaulted to 1');
    }
};

getQuantity() {
    return this._quantity;
};

toObject() {
    return {
        id: this.getId(),
        name: this.getName(),
        price: this.getPrice(),
        quantity: this.getQuantity(),
        data: this.getData(),
        total: this.getTotal()
    }
};

}

const name = 'NgCartItem';

// create a module
export default angular.module(name, [
    angularMeteor
]).service(name, NgCartItem);

以这种方式使用

import { name as NgCartItem } from './ngCartItem';
import { name as storeService } from './store';

class NgCart {

constructor($reactive, $window, storeService, NgCartItem) {
    'ngInject';
    store = storeService;
    this.NgCartItem = NgCartItem;
}   

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.setQuantity(quantity, false);
    } else {
        // here how I created it
        var newItem = this.NgCartItem.item(id, name, price, quantity, data);
        this.$cart.items.push(newItem);
    }
};
}

const name = 'NgCart';

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

这里是我如何访问html

<tr ng-repeat="item in ngCartCart.ngCart.getCart().items track by $index">
                <td><span ng-click="ngCartCart.ngCart.removeItemById(item.getId())" class="glyphicon glyphicon-remove"></span></td>

                <td>{{ item.name }}</td>
                <td><span class="glyphicon glyphicon-minus" ng-class="{'disabled':item.getQuantity()==1}" ng-click="item.setQuantity(-1, true)"></span>&nbsp;&nbsp;
                    {{ item.getQuantity() | number }}&nbsp;&nbsp;
                    <span class="glyphicon glyphicon-plus" ng-click="item.setQuantity(1, true)"></span></td>
                <td>{{ item.price | currency}}</td>
                <td>{{ item.total | currency }}</td>
 </tr>

现在问题。

我可以访问item.name，item.price，item.total，但无法访问item.getQuantity()或item.setQuantity(-1, true)。我认为这是因为我滥用toObject()功能。如何正确使用服务？这里是1.3 version的来源，我在ES2015风格中将其重写为1.5

Answer 1

角度服务和ES6类之间存在混淆。您的NgCartItem服务现在是一个单独的服务，您只有一个实例，但您需要为每个项目创建它。

如果您需要这样做，您需要将class作为工厂函数的结果

function NgCartItemFactory($log) {
    'ngInject';
    return class NgCartItem {
        constructor(id, name, price, quantity, data) {
            //create your stuff here
        }

        setQuantity(quantity, relative) {
        }
    }
}

export default angular.module(name, []).factory(name, NgCartItemFactory);

然后你可以使用它

// here how I created it
var newItem = new this.NgCartItem(id, name, price, quantity, data);
this.$cart.items.push(newItem);

不要忘记与new运营商通话，因为ES6类需要

我如何使用Angular 1.5服务

现在问题。

1 个答案: