我有这项服务
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>
{{ item.getQuantity() | number }}
<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
答案 0 :(得分: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类需要