AngularJS 1.4X如何擴展工廠對象

Question

SOLUTION

感謝赫格隆-Hegedus的下面回答。將它應用於我的實際代碼並且效果很好。

// 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

工廠對象EXTEND

// 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)); 
    }; 
}); 

我試圖延長IIEF工廠angular.extend（），但是這也不管用（下面的例子）：

angular.extend(imageOfUnableToExtendFn, { 
    isIcon: function(img) { 
     return img.type === IMG_TYPE.ICON; 
    } 
}) 

更詳細的A BOVE供參考用途

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); 

}）;

Answer 1

JavaScript中的子類化有點棘手。看看this SO post about javascript inheritance。

基本上，這是你平時是怎麼做到這一點，裹在角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);