This question already has an answer here:
-
AngularJS: How can I pass variables between controllers?
15 answers
I know this has been posted before but I am still confused on how to achieve this for my specific problem.
my first controller:
myApp.controller("buttonCtrl", function($scope){
$scope.johnny = [
{quote: "Anything for My Princess", controller: Princess},
{quote: "Don't Even Ask", controller: DontAsk}];
}
Now I would like to use the $scope.johnny object in this controller:
function Princess($scope){
$scope.play = function(){
//use $scope.johnny.quote or something of the sorts in here
}
}
How would this be done? I have seen posts where $rootScope or services are used; however, how would I implement one in my case.
Thanks a lot.
Use Angular JS Services/ Factories
A sample example is shown below
Working Demo
HTML
<div ng-app='myApp'>
<div ng-controller="ControllerOne">
<button ng-click="getUserOne()">User One</button>
</div>
<div ng-controller="ControllerTwo">
<button ng-click="getUserTwo()">User Two</button>
</div>
</div>
SCRIPT
var app = angular.module('myApp', []);
app.factory('userFactory', function () {
return {
users: [{
userId: 1,
userName: "Jhonny"
}, {
userId: 2,
userName: "Sunny"
}]
}
});
app.controller('ControllerOne', function ($scope, userFactory) {
$scope.getUserOne = function () {
alert(JSON.stringify(userFactory.users[0]));
}
});
app.controller('ControllerTwo', function ($scope, userFactory) {
$scope.getUserTwo = function () {
alert(JSON.stringify(userFactory.users[1]));
}
});
Also take a look at this stuff
How can I pass variables between controllers in AngularJS?