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

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

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

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 } });

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

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Related