Access variables defined in other controller

Question

'use strict';

angular.module('sampleApplicationApp').config(function($stateProvider)
{
    $stateProvider.state('abcmanagement', {
        parent : 'parentmanagement',
        url : '/em',
        views : {
            'content@' : {
                templateUrl : 'scripts/app/abc.html',
                controller : 'abcController'
            }
        }
    }).state('newmodel', {
        parent : 'abcmanagement',
        url : '/new',
        views : {
            'content@' : {
                templateUrl : 'scripts/app/xyz.html',
                controller : 'xyzController'
            }
        }
    })
});

angular.module('sampleApplicationApp')
.controller('abcController', function ($scope, $state, $modal) {

       $scope.models = {};
       // logic to load models

});

angular.module('sampleApplicationApp')
.controller('xyzController', function ($scope, $state, $modal) {

       // I want to access models from above controller

});

Is there a possibility i can have access to models defined in abcController from xyzController ?

You can use services to access data in several controllers – giladk Nov 14 '15 at 17:38 — giladk, Nov 14 '15 at 17:38

user2954463 · Accepted Answer · 2015-11-14T17:55:10.220

two options:

if the controllers inherit from the same parent controller, you can store the data in the parent $scope (or $rootScope, but that's bad practice);
if the controllers do not inherit from the same parent controller, use a factory to share data between controllers:

`

angular.module('sampleApplicationApp')
   .factory('abcModel', function () {
    var factory = {};
    var model = {};

    factory.setModel = function(key, value) {
       model[key] = value;
    }
    factory.getModel = function(key) {
       return model[key];
    };
    return factory;
});

angular.module('sampleApplicationApp')
.controller('abcController', function ($scope, $state, $modal, abcModel) {
    abcModel.setModel('abc', "hello world");

});

angular.module('sampleApplicationApp')
.controller('xyzController', function ($scope, $state, $modal, abcModel) {
   $scope.value = abcModel.getModel('abc');

});

score 1 · Answer 2 · answered Nov 14 '15 at 17:52

You have, potentially, as many as three options:

1) If xyzController resides within abcController within your HTML then you can reference $parent.property ('property' being the name of the $scope property in the parent controller you want access to).

2) You could use $rootScope by setting any properties you want to access in multiple controllers like so, $rootScope.property. I would recommend avoiding this as it could pollute the global scope.

3) You could use an Angular service with methods for getting and setting the variables in question. Then you could simply inject this service as a dependency in each controller where you need access to these variables. Recommended approach

@vp_arth, true. Option 2 should be avoided at all costs. The only time I really touch `$rootScope` is when broadcasting events that other controllers are listening for, but even this I don't like. — MattDionis, Nov 14 '15 at 17:59

score 0 · Answer 3 · answered Nov 14 '15 at 17:38

0

The best practice is that you should create an Angular service which holds the variable.

You can work around it by using the $rootScope. Don't forget to inject it in both controllers ;)

answered Nov 14 '15 at 17:38

Karens

613
5
18

score 0 · Answer 4 · answered Nov 14 '15 at 18:58

There are many ways to achieve what you are trying to do.You can create a factory or a service,you can use $rootScope(not recommended),you can use angular's broadcast, emit method to achieve this.Refer to this example http://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers

Access variables defined in other controller

4 Answers4