AngularJS 1.4x如何扩展工厂对象
AngularJS 1.4x how to extend a factory object
解决方案
感谢下面的回答。将它应用到我的实际代码中,效果很好。
// NOTE : called from another service, but removed function wrap around and angular module setup for brevity sake
// article is serverObject
var articleInstance = new Article(article);
console.log(articleInstance instanceof Article)
// true
console.log(articleInstance.isProduct(article))
// true (in my case)
/*
* Create the constructor from server article object using lodash
*/
ArticleConstructor.$inject = [];
function ArticleConstructor() {
return function(data) {
var keys = ['app_id', 'body', 'headline', 'object_type', 'url', 'status'
];
_.assign(this, _.pick(data, keys));
};
}
/*
* Extend the iief constuctor - ArticleConstruct
*/
Article.$inject = ['ArticleConstructor'];
function Article(ArticleConstructor) {
function ArticleExtended(data) {
ArticleConstructor.call(this, data);
}
// create the new Article object with the ArticleConstructor prototype object and properties
ArticleExtended.prototype = Object.create(ArticleConstructor.prototype);
// Article inherits a constructor property from its prototype i.e. ArticleConstructor
ArticleExtended.prototype.constructor = ArticleExtended;
ArticleExtended.prototype.isProduct = function () {
return this.object_type == 3;
};
ArticleExtended.prototype.hasImage = function () {
return _.has(this, 'image');
};
return ArticleExtended;
}
如何扩展下面的工厂对象。我正在使用lodash自动水合工厂构造函数,这很好,但现在我的原始方法都没有执行,例如isIcon()
返回错误消息-"isIcon不是函数"。我一直在寻找答案,但大多数构造函数示例在对象末尾使用传统的return service;
,这很好,但后来迫使我回到更手动的方法来构建构造函数。我觉得我错过了一些显而易见的东西。
使用AngularJS 1.4.8
要扩展的工厂对象
// AJS factory - the problem child
ImageUnableToExtendFn.$inject = ['IMG_TYPE'];
function ImageUnableToExtendFn(IMG_TYPE) {
Image.prototype.isIcon = function (img) {
return img.type === IMG_TYPE.ICON;
};
return function(data) {
var keys = ['id', 'src', 'alt', 'type'];
_.assign(this, _.pick(data, keys));
};
});
我尝试过用angular.extend()扩展IIEF工厂,但也不起作用(下面的例子):
angular.extend(imageOfUnableToExtendFn, {
isIcon: function(img) {
return img.type === IMG_TYPE.ICON;
}
})
以上详细信息仅供参考
define([
'angular',
'lodash'
], function(angular, _) {
'use strict';
ImageService.$inject = ['ImageClassicFn', 'ImageUnableToExtendFn'];
function ImageService(ImageClassicFn, ImageUnableToExtendFn) {
var imageService = {
images: null,
createInstance: function(serverImageObject) {
var self = this,
imageOfClassicFn,
imageOfUnableToExtendFn,
isIcon,
if (angular.isDefined(serverImageObject)) {
imageOfClassicFn = new ImageClassicFn();
isIcon = imageOfClassicFn.isIcon(serverImageObject);
console.log('IS ICON', isIcon);
// > true of false
imageOfUnableToExtendFn = new ImageUnableToExtendFn(serverImageObject);
// result is a hydrated instance of ImageClassicFn with mapped keys using lodash
isIcon = imageOfClassicFn.isIcon(serverImageObject);
// ERROR - isIcon is not a function
// Attempting to extend manually fails silently
angular.extend(imageOfUnableToExtendFn, {
isIcon: function(img) {
return img.type === IMG_TYPE.ICON;
}
})
isIcon = imageOfClassicFn.isIcon(serverImageObject);
// SAME ERROR - isIcon is not a function
}
}
};
return imageService;
}
ImageClassicFn.$inject = ['IMG_TYPE'];
function Image(IMG_TYPE) {
function Image(id, src, alt, type) {
this.id = id;
this.src = src;
this.alt = alt;
this.type = type;
}
Image.prototype.isIcon = function (img) {
return img.type === IMG_TYPE.ICON;
};
return Image;
});
ImageUnableToExtendFn.$inject = ['IMG_TYPE'];
function Image(IMG_TYPE) {
Image.prototype.isIcon = function (img) {
return img.type === IMG_TYPE.ICON;
};
return function(data) {
var keys = ['id', 'src', 'alt', 'type'];
_.assign(this, _.pick(data, keys));
};
});
return angular.module('content.images', [
])
.constant("IMG_TYPE", {
"ICON": 1,
})
.factory('ImageClassicFn', ImageClassicFn)
.factory('ImageUnableToExtendFn', ImageUnableToExtendFn)
.service('ImageService', ImageService);
});
javascript中的子类划分有点棘手。看看这篇关于javascript继承的SO文章。
基本上,这就是你通常做这件事的方式,包裹在1.x角模块中:
ImageClassicFactory.$inject = ['IMG_TYPE'];
function ImageClassicFactory(IMG_TYPE) {
function ImageClassic(id, src, alt, type) {
this.id = id;
this.src = src;
this.alt = alt;
this.type = type;
}
ImageClassic.prototype.isIcon = function (img) {
return img.type === IMG_TYPE.ICON;
};
return ImageClassic;
});
module.factory('ImageClassic', ImageClassicFactory);
ImageExtendedFactory.$inject = ['IMG_TYPE', 'ImageClassic'];
function ImageExtendedFactory(IMG_TYPE, ImageClassic) {
function ImageExtended(id, src, alt, type) {
ImageClassic.call(this, id, src, alt, type);
}
ImageExtended.prototype = Object.create(ImageClassic.prototype);
ImageExtended.prototype.constructor = ImageExtended;
ImageExtended.prototype.isIcon = function (img) {
return img.type === IMG_TYPE.ICON;
};
return ImageExtended;
});
module.factory('ImageExtended', ImageExtendedFactory);
相关文章:
- Node.js v6.2.0类扩展不是函数错误
- 扩展移相器按钮类不工作
- chrome扩展中的navigator.geolocation.getCurrentPosition
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- chrome扩展更改主机/域警告
- TableExport jquery插件:文件名和扩展名问题
- 如何在chrome扩展中重定向到html页面
- Chrome扩展没有't在重新加载之前考虑期权价值
- 扩展SVGTextElement时出现Typescript Uncaught TypeError
- 如何通过自己获得Chrome扩展的用户反馈/错误报告
- Javascript”;类“;带有参数的扩展
- 试图阻止Chrome通过扩展关闭
- Angularjs工厂注入错误
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- 如何将参数传递到angularJs中的工厂
- 在扩展 firebase 工厂以运行 getTotal() 函数时,我可以使用 $$updated 吗?
- AngularJS 1.4x如何扩展工厂对象
- 在AngularJS TypeScript中扩展工厂
- 扩展$resource对象从工厂中移除原型