Error accessing AngularJS factory methods/arrays

Question

I'm dividing my functions/objects into service and factory methods, and injecting them into my controller patentTab. I had a code for a tab panel which I originally placed within the controller patentTab that worked.

Now I have placed this code in a factory method and for some reason the content isn't loading. Console log shows no errors, and when I click the relative tab the correct URL is loaded, but the content doesn't change. Is there an issue with my array in the factory? If not, what is the reason?

Orginal code

app.controller('patentTab', function($scope, $http){
    $scope.tabs = [{
    title: 'Patent Information',
    url: 'patent-info.htm'
}, {
    title: 'Cost Analysis',
    url: 'cost-analysis.htm'
}, {
    title: 'Renewal History',
    url: 'renewal-history.htm'
}];

$http.get('../json/patent-info.json').then(function(response){
    $scope.patentData = response.data.patentInfo;
})

$scope.currentTab = 'patent-info.htm';

$scope.onClickTab = function (tab) {
    $scope.currentTab = tab.url; //the tabs array is passed as a parameter from the view. The function returns the url property value from the array of objects.
}

$scope.isActiveTab = function(tabUrl) {
    return tabUrl == $scope.currentTab;
}
});

New code (with issue)

 app.controller('patentCtrl', ['$scope', '$http', 'patentTabFactory', function($scope, $http, patentTabFactory) {

$http.get('http://localhost:8080/Sprint002b/restpatent/').then(function(response) {
    $scope.patents = response.data;
});

$scope.loadPatentItem = function(url) {
    $scope.patentItem = url;
}

$scope.tabs = patentTabFactory.tabs;
$scope.currentTab = patentTabFactory.currentTab;
$scope.onClickTab = patentTabFactory.onClickTab;
$scope.isActiveTab = patentTabFactory.isActiveTab;

}]);

app.factory('patentTabFactory', function() {

var factory = {};

factory.tabs = [{
    title: 'Patent Information',
    url: 'patent-info.htm'
}, {
    title: 'Cost Analysis',
    url: 'cost-analysis.htm'
}, {
    title: 'Renewal History',
    url: 'renewal-history.htm'
}];

factory.currentTab = 'patent-info.htm';

factory.onClickTab = function (tab) {
    factory.currentTab = tab.url; //the tabs array is passed as a parameter from the view. The function returns the url property value from the array of objects.
    console.log(tab.url);

}

factory.isActiveTab = function(tabUrl) {
    return tabUrl == factory.currentTab; //for styling purposes
}

return factory;

});

All looks good to me, are you defining the factory before the patentCtrl ? — Alok
– Alok, Commented May 17, 2017 at 8:50
No after? The rest of the functionality works, yet the content won't display. Don't think the error is in the HTML as it was working before hand — Patrick McDermott
– Patrick McDermott, Commented May 17, 2017 at 8:55

anoop · Accepted Answer · 2017-05-17 10:21:38Z

1

You not calling factory.onClickTab() method from your controller. It should be like :

$scope.onClickTab = function(currentTab) {
    patentTabFactory.onClickTab(currentTab);
    $scope.currentTab = patentTabFactory.currentTab;
};

and, for isActiveTab, Like :

$scope.isActiveTab = patentTabFactory.isActiveTab(currentTab);

answered May 17, 2017 at 10:21

anoop

3,8222 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Patrick McDermott Over a year ago

Thank you! I have spent hours looking at not understanding. I thought that when the function was called, the factory handled the execution

anoop Over a year ago

Glad to help you :), infact you thought right but call was not reaching to factory to handle the execution. :)

Patrick McDermott Over a year ago

Using your same logic I had to adjust the isActiveTab to $scope.isActiveTab = function(tabUrl) { return tabUrl == patentTabFactory.currentTab; }

anoop Over a year ago

yes you have to, but like the way i already mentioned in answer $scope.isActiveTab = patentTabFactory.isActiveTab(currentTab);

Alok · Accepted Answer · 2017-05-17 09:00:23Z

0

Here is a plunker where I am using a factory. The only changes I have done are: 1. Place the factory file before the app script file. 2. Use a separate declaration for factories and then inject it in the app.

var factories = angular.module('plunker.factory', []);
factories.factory('patentTabFactory', function() {
// Factory bits
};

I have injected the factories in the app.

var app = angular.module('plunker', ['plunker.factory']);

Here is a working plunker for that. PlunkR

answered May 17, 2017 at 9:00

Alok

1,3101 gold badge11 silver badges21 bronze badges

2 Comments

Patrick McDermott Over a year ago

I could be missing something form the demo but I don't think it provides the outcome I'm looking for. Can I ask why two modules have been declared? Is this best practice?

Alok Over a year ago

I indeed is the best practise. Helps segregate the factories from everything else. It also helps in making tests more easy to read.

Collectives™ on Stack Overflow

Error accessing AngularJS factory methods/arrays

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related