Unable to access model content in multiple AngularJS controllers

Question

Unable to access model content in multiple AngularJS controllers

My question is clear and straightforward. Let me explain in detail: 1. I have created a module.

var ang = angular.module('myApp', []);

I have a controller named controller1, which includes the 'campaign' factory.

//controllerone.js

ang.controller('controller1', function(campaign){
   $scope.campaigns = new campaign();
   //The entire campaign object with data is displayed here, please refer to Image 1 attached
   console.log($scope.campaigns); 
});

ang.factory('campaign', function($http){
  var campaign = function(){
    this.timePeriodList = buildTimePeriodList();
    ...
    ...
    this.campaignList = [];

 };
Campaigns.prototype.fetchCampaigns = function() {
  //Service call to populate the data in this.campaignList
};
});

Now when trying to use the same campaign factory in the second controller, only the object structure is retrieved without any data.

//controlertwo.js

ang.controller('controller2', function(campaign){
   $scope.campaigns = new campaign();
   //Only the structure of the campaign object is shown, but no data for campaignList, see image 2 attached
   console.log($scope.campaigns); 
});

Since the factory service is a singleton object, I expected the same result as in controllerone.js,

Image 1:

Image 2:

javascript angularjs prototype-programming

Answer 1

Answer №1

When working with an angular factory, I recommend taking a different approach. Avoid attaching anything to the Prototype of an object. Instead, create an object within the scope of your angular factory, attach the desired elements to it, and then return it. For instance:

     ang.factory('campaign', function ($http) {
var campaign = {};
campaign.method1 = function () {
    //..
}
campaign.campaignList = [];
//...

campaign.fetchCampaigns = function () {
    //Service call to populate the data in this.campaignList
};

});

//Then, if campaign is injected into your controllers, you can utilize it like this:

ang.controller('controller2', function (campaign) {
    campaign.fetchCampaigns();// This will populate the list and keep it filled for other controllers to use...
    console.log(compaign.campaignList);
});

Avoid exposing any elements outside of the factory by not attaching them to the campaign object.

Answer 2

When working with an angular factory, I recommend taking a different approach. Avoid attaching anything to the Prototype of an object. Instead, create an object within the scope of your angular factory, attach the desired elements to it, and then return it. For instance:

     ang.factory('campaign', function ($http) {
var campaign = {};
campaign.method1 = function () {
    //..
}
campaign.campaignList = [];
//...

campaign.fetchCampaigns = function () {
    //Service call to populate the data in this.campaignList
};

});

//Then, if campaign is injected into your controllers, you can utilize it like this:

ang.controller('controller2', function (campaign) {
    campaign.fetchCampaigns();// This will populate the list and keep it filled for other controllers to use...
    console.log(compaign.campaignList);
});

Avoid exposing any elements outside of the factory by not attaching them to the campaign object.

Answer 3

Answer №2

Establish a campaign within a service. For example, use the campaignService.

Code has been updated---

var ang = angular.module('myApp', []);

ang.service('campaignService', function($scope){
    var campaign = function(){
        this.timePeriodList = buildTimePeriodList();
        ...
        ...
        this.campaignList = [];
    }
    return campaign;
});

ang.controller("controller1", ["campaignService",
function($scope, $rootScope, campaignService){
    $scope.campaigns=campaignService.campaign();
}
]);

ang.controller("controller2", ["campaignService",
function($scope, $rootScope, campaignService){
    $scope.campaigns=campaignService.campaign();
    console.log($scope.campaigns);
}
]);

Answer 4

Establish a campaign within a service. For example, use the campaignService.

Code has been updated---

var ang = angular.module('myApp', []);

ang.service('campaignService', function($scope){
    var campaign = function(){
        this.timePeriodList = buildTimePeriodList();
        ...
        ...
        this.campaignList = [];
    }
    return campaign;
});

ang.controller("controller1", ["campaignService",
function($scope, $rootScope, campaignService){
    $scope.campaigns=campaignService.campaign();
}
]);

ang.controller("controller2", ["campaignService",
function($scope, $rootScope, campaignService){
    $scope.campaigns=campaignService.campaign();
    console.log($scope.campaigns);
}
]);

Unable to access model content in multiple AngularJS controllers

Answer №1

Answer №2

Similar questions

JavaScript Equivalent of jQuery's removeClass and addClass Functions

Using Vue.js to set both v-model and v-bind:value on one input element

Stop Ajax from activating jQuery function

What could be the reason for my post jQuery Ajax request sending JSON data?

cross-domain ajax response

Exploring AngularJS: Leveraging ng-model within a custom directive featuring iterations and dynamically generated HTML elements

Where is the destination of the response in a Client-Side API Call?

Navigating JSON Data in Groovy Using a Loop: A Handy Guide

Guide to testing Vuex Mutations with Vue-test-utils and Jest

What are the steps to implementing a JavaScript WebWorker in a webpack environment?

Prepare an email message for sending

Tips for retrieving return values from AJAX URL content

Nodejs application crashes due to buffer creation issues

Using AngularJS ng-options with templates embedded within

Incorporate JSON data using jQuery's AJAX in MVC3

Encountering an Invariant Violation: React does not allow objects to be used as children

What is the reason for the clearInterval consistently functioning after the completion of the function?

Utilizing a Meteor Method within a Promise Handler [Halting without Throwing an Error]

Encountered a "no login transports available" error while trying to use Firebase

Display only a loading image with a see-through background after submitting the page