Angularjs : get value of scope variable in a controller defined inside another controller which is inside directive

Question

I have a directive where a controller is defined and there is a variable say "$scope.accesJson". I need to access it from another controller.

Code:

angular.module('test.directives').directive("manageAccess", function() {
    return {
        restrict: "E",
        replace: true,
        templateUrl: "template/test.html",
        controller: function($scope, $element, $http) {
            $scope.accesJson = ["hi","hello"];
        }
    };
});

I have another controller,

angular.module("test.controllers").controller("testController", function($scope, $http) {
    $scope.getUsers = function() {
        console.log $scope.accesJson //I need value of $scope.accesJson here.
    }
});

How can I do that?

Please help, Thanks

CozyAzure · Accepted Answer · 2014-09-16 09:21:34Z

3

To share resources across two controllers, you can always use a service or a factory. You may also do it by defining a global variable, but that is NOT encouraged.

To declare a factory:

var app = angular.module('app',[])
 .factory('appSvc',[function(){
  var resources = {};
   return resources;
 }]);

note that you can declare re-usable functions inside a factory.

With your factory declared, remember to inject it properly into your controllers who needs it.

app.controller('appCtrl',['appSvc',function(appSvc){
 //do something with your appSvc
 }]);

Here is a very simple plnkr to show how service/factory is used to get and set data.

For in-depth documentation: AngularJs Service

edited Sep 16, 2014 at 9:21

answered Sep 16, 2014 at 8:59

CozyAzure

8,4987 gold badges39 silver badges56 bronze badges

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

Comments

az7ar · Accepted Answer · 2014-09-16 09:01:39Z

2

For sharing data between different controller Service's are good option. Define one like so,

angular.module("test.services").factory('DataBasket', function () {
    return {};
});

And in the directive

controller: function($scope, $element, $http, DataBasket) {
        DataBasket.accessJson = ["hi", "hello"];
        $scope.accesJson = DataBasket.accessJson;
    }

from other controller

angular.module("test.controllers").controller("testController", function($scope, $http, DataBasket) {
    $scope.getUsers = function() {
        console.log DataBasket.accesJson 
    }
});

answered Sep 16, 2014 at 9:01

az7ar

5,2372 gold badges21 silver badges23 bronze badges

Comments

M.K. Safi · Accepted Answer · 2014-09-16 09:30:38Z

You can also bind a property from the outer $scope to the directive in the linking function of the directive, like so:

angular.module('foo', [])

.directive("manageAccess",
  function() {
    return {
      restrict: "E",
      replace: true,
      scope: {
        property: '='
      },
      link: function($scope) {
        $scope.property = { foo: 1 }
      }
    }
  }
)

.controller('Main',
  function($scope) {
    $scope.showAccessJsonValue = function() {
      $scope.value = $scope.accessJson
    }
  }
)

Then in your template, you could have a ng-click that calls showAccessJsonValue which will give you the value that you assigned in the directive.

Like,

<body ng-controller="Main">

<manage-access property="accessJson"></manage-access>

<button ng-click="showAccessJsonValue()">Show value</button>

<pre>{{value | json}}</pre>

</body>

Here's a demo Plunk.

Collectives™ on Stack Overflow

Angularjs : get value of scope variable in a controller defined inside another controller which is inside directive

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related