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
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
Share Improve this question edited Sep 16, 2014 at 9:00 Awtszs 3412 gold badges8 silver badges33 bronze badges asked Sep 16, 2014 at 8:55 Erma IsabelErma Isabel 5552 gold badges11 silver badges25 bronze badges3 Answers
Reset to default 3To 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
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
}
});
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.