how to passing data from one controller to another controller using angular js 1

Question

hi all i using angular js i need to transfer the value from one page controller to another page controller and get that value into an a scope anybody help how to do this

code Page1.html

var app = angular.module("app", ["xeditable", "angularUtils.directives.dirPagination", "ngNotify", "ngCookies","ngRoute"]);
app.controller('Controller1', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore',
 function ($scope, $http, $window, $filter, $notify, $cookieStore)
 {
   $scope.Message="Hi welcome"

 }]);

now i want to show scope message into page2 controller

 var app = angular.module("app", ["xeditable", "angularUtils.directives.dirPagination", "ngNotify", "ngCookies","ngRoute"]);
    app.controller('Controller2', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore',
     function ($scope, $http, $window, $filter, $notify, $cookieStore)
     {
       ///here i want get that scope value

     }]);

easy solution -> http://stackoverflow.com/questions/14502006/working-with-scope-emit-and-on — , Apr 29 '17 at 07:51
Possible duplicate of [Passing data between controllers in Angular JS?](http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js) — Ninja, Apr 29 '17 at 07:58

Akashii · Answer 1 · 2017-04-29T08:52:33.410

0

You should use services for it . Services

   app.factory('myService', function() {
 var message= [];
 return {
  set: set,
  get: get
 }
 function set(mes) {
   message.push(mes)
 }
 function get() {
  return message;
 }



});

And in ctrl

ctrl1

$scope.message1= 'Hi';
  myService.set($scope.message1);

ctrl2

var message =  myService.get()

edited Apr 29 '17 at 08:52

answered Apr 29 '17 at 07:45

Akashii

2,251
3
17
29

cookie will not reflect imediately once page refresh then only it's work – jose Apr 29 '17 at 07:51
i have one dropdown in page 1 when i select the value mens reflects the page2 controller – jose Apr 29 '17 at 07:51
You should use $watch for it . But best practice is use services or factory – Akashii Apr 29 '17 at 07:53
i have confused give some fiddle or sample code yar – jose Apr 29 '17 at 07:54
I dont have a dropdown or routing now . Can you create plnkr or fiddle ? – Akashii Apr 29 '17 at 07:56
it's little tricky i am not able to create fiddle @thanh tung – jose Apr 29 '17 at 07:57
i have header page that include in main page using ng-include in header have a dropdown when i change that content page content will change – jose Apr 29 '17 at 07:58
@jose here is plnkr i create . check this http://plnkr.co/edit/jfoDRcOSl0hP8ErVlZ3u?p=preview – Akashii Apr 29 '17 at 08:46
i have both controller have an indivudal page @Thsnh Tung – jose Apr 29 '17 at 09:40
myService.set($scope.message1); is not create i think when i check it console it's undefined – jose Apr 29 '17 at 09:47
Are your check the plnkn ? . First go page 1 , type input and hit button click , then go page 2 and see it http://plnkr.co/edit/jfoDRcOSl0hP8ErVlZ3u?p=preview – Akashii Apr 29 '17 at 10:30
plunker working fine yar thanks but i have controller in different page it's not working yar so only i ask otherwise wait i will update my code – jose Apr 29 '17 at 10:31
if you inject services as dependency, you can use it anywhere . But i will wait you update your code – Akashii Apr 29 '17 at 10:37
Kindly check @ Thanh Tùng http://stackoverflow.com/questions/43694605/how-to-switch-controller-values-from-ng-include-in-angularjs – jose Apr 29 '17 at 10:41

score 0 · Answer 2 · answered Apr 29 '17 at 07:50

0

You can use $rootScope instead of $scope:

// do not forget to inject $rootScope as dependency
$rootScope.Message="Hi welcome";

But the best practice is using a service and share data and use it in any controller you want.

answered Apr 29 '17 at 07:50

Vahid Najafi

4,654
11
43
88

yes i need service give sample @vahid najafi or please elabrate the root scope – jose Apr 29 '17 at 07:53
About `$rootScope`, when you created it as mentioned in the answer, you can access it like `$scope`. And for `service` take a look at here https://www.airpair.com/javascript/posts/services-in-angularjs-simplified-with-examples – Vahid Najafi Apr 29 '17 at 07:59

score 0 · Answer 3 · answered Apr 29 '17 at 08:04

You should define a service and write getter/setter functions on this.

angular.module('app').service('msgService', function () {
  var message;
  this.setMsg = function (msg) {
     message = msg;
  };

  this.getMsg = function () {
     return message;
  };
});

Now you should use the setMeg function in Controller1 and getMsg function in Controller2 after injecting the dependency like this.

app.controller('Controller1', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore', 'msgService',
   function ($scope, $http, $window, $filter, $notify, $cookieStore, msgService)
   {
     $scope.Message="Hi welcome"
     msgService.setMsg($scope.Message);
   }]);


app.controller('Controller2', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore', 'msgService',
 function ($scope, $http, $window, $filter, $notify, $cookieStore, msgService)
 {
   ///here i want get that scope value
   console.log('message from contoller 1 is : ', msgService.getMsg());
 }]);

you probably forgot to add `msgService` in the controllers dependancies list. see at the end of the above solution.You also need to add the service file in your _index.html_. — schachan, Apr 29 '17 at 08:50

score 0 · Answer 4 · answered Apr 29 '17 at 21:02

Sharing data from one controller to another using service

We can create a service to set and get the data between the controllers and then inject that service in the controller function where we want to use it.

Service :

app.service('setGetData', function() {
  var data = '';
    getData: function() { return data; },
    setData: function(requestData) { data = requestData; }
});

Controllers :

app.controller('Controller1', ['setGetData',function(setGetData) {

// To set the data from the one controller $scope.Message="Hi welcome";
setGetData.setData($scope.Message);

}]);

app.controller('Controller2', ['setGetData',function(setGetData) {

  // To get the data from the another controller  
  var res = setGetData.getData();
  console.log(res); // Hi welcome

}]);

Here, we can see that Controller1 is used for setting the data and Controller2 is used for getting the data. So, we can share the data from one controller to another controller like this.

how to passing data from one controller to another controller using angular js 1

code Page1.html

now i want to show scope message into page2 controller

4 Answers4

Linked