我有以下情况
.factory(
'itemsApi',
function($resource) {
return $resource("/api/items/:id", { id: "@_id" }, {
'create': { method: 'POST' },
'get': { method: 'GET', isArray: false },
'update': { method: 'PUT' }
});
})
$routeProvider
.when("/item/:id", {
templateUrl: "item.tpl.html",
controller: "ItemController",
resolve: {
item: ['$route', 'itemsApi', function ( $route, itemsApi) {
return itemsApi.get({ id: $route.current.params.id });
}]
}
}
})
.controller('ItemController',['$scope','item', function($scope, item) {
$scope.item = item;
}
到目前为止一切正常。我的控制器里有这个项目。现在我想用我的业务逻辑扩展$scope.item
。
function Item() {}
Item.prototype.totalPrice = function() {
// $scope.item should be here 'this'
return this.price + this.shipping;
}
使用Angular Way中的业务逻辑扩展$scope.item
。
我尝试使用angular.extend
但不起作用。 $ scope.item没有totalPrice函数。
例如: in controller
$scope.item = angular.extend(item, new Item());
我如何优雅地$scope.item
包含Item
类的方法?
@ryeballar提出的解决方案产生了难看的效果。
现在' $ scope.item'将$资源包装在' $ scope.item.item'
中所以我应该更改文档中的每个绑定路径。
<span ng-bind="item.price"></span>
<span ng-bind="item.item.price"></span>
这对我来说是不可接受的,感觉不好练习。然后我想到了这个解决方案
var Item = function Item(item) {
// mixing
angular.extend(this, item);
};
这解决了最后一个问题但产生了新问题。
现在$scope.item
不包含$resource
方法。 (例如$scope.item.update()
)从__proto__
到Resourse
Item
到期{/ 1}}
虽然$socpe.item
不再有update
和create
方法。可以使用itemApi
代替。
if ($scope.item._id) {
itemsApi.update({ id: $scope.item._id}, $scope.item)
.$promise.then(function(item) {
$scope.item = new Indoor(item);
});
} else {
itemsApi.create($scope.item)
.$promise.then(function(item) {
$scope.item= new Indoor(item);
});
}
答案 0 :(得分:4)
为您的Item
模型创建工厂服务并将其注入您的决心,然后将已解析的值作为Item
对象返回。
项目服务
.factory('Item', function() {
var Item = function(item) {
this.item = item;
};
Item.prototype.totalPrice = function() {
return this.item.price + this.item.shipping;
};
return Item;
});
<强>路由器强>
$routeProvider
.when("/item/:id", {
templateUrl: "item.tpl.html",
controller: "ItemController",
resolve: {
item: ['$route', 'itemsApi', 'Item', function ( $route, itemsApi, Item) {
return itemsApi.get({ id: $route.current.params.id })
.$promise.then(function(item) {
return new Item(item);
});
}]
}
}
});
<强>控制器强>
.controller('ItemController', ['$scope', 'item', function($scope, item) {
$scope.item = item; // this is an Item Object
}]);
<强> HTML 强>
{{item.totalPrice()}}