Exploring the concept of inheritance in Angular services is my current objective. I came across this helpful resource: . I am particularly interested in implementing the "Inject the parent" technique.
However, despite following the guidelines, I'm facing difficulties as it doesn't seem to function correctly, and I'm unable to pinpoint the issue.
var myApp = angular.module('myApp',[]);
angular.module('myApp').controller('MyCtrl', MyCtrl);
angular.module('myApp').factory('BaseModel', BaseModel);
angular.module('myApp').factory('ThreadModel', ThreadModel);
angular.module('myApp').factory('PostModel', PostModel);
function MyCtrl($scope, ThreadModel, PostModel) {
$scope.tableNameForThreads = ThreadModel.getTableName();
$scope.tableNameForPosts = PostModel.getTableName();
}
function BaseModel() {
var tableName = "";
var service = {
init: init,
getTableName: getTableName
};
return service;
function getTableName() {
return tableName;
}
function init(theTableName) {
tableName = theTableName;
}
}
function ThreadModel(BaseModel) {
var service = Object.create(BaseModel);
service.init("threads");
return service;
}
function PostModel(BaseModel) {
var service = Object.create(BaseModel);
service.init("posts");
return service;
}
After analysis, it appears that the function ThreadModel.getTableName() incorrectly returns "posts" instead of "threads".
I experimented with both Object.create(...) and angular.copy(BaseModel, this), but unfortunately, neither method seems to create a deep copy.
To replicate the issue and for further investigation, you can view the JSFIDDLE demo here: http://jsfiddle.net/dirkpostma/Lvc0u55v/3989/
I would appreciate any insights or guidance on what could be causing the problem in my implementation.