AngularJS- How to pass data from one controller to another on ng-click()?

Question

So I am trying to share data between two controllers on an on-click event. My code is as follows:

Controller

function userTypeController($scope, $location, CategoryService) {
  let vm=this;

vm.getCat=function(){

    CategoryService.getCategories() .then(function (response) 
        {
          $scope.categories=response.data.data.categories;
          $scope.index = 0;
          $scope.array = [];
          for(var i=0; i<$scope.categories.length/2;i++)
          $scope.array.push(i);


                                       });
    $location.path('/category');
};
  };

Say in my html for that controller, I have a button that calls the getCat function.

 <md-button md-whiteframe="8"  ng-click="utCtrl.getCat()">Submit<md-button>

In my category service , I have a function that returns a list of categories.

Service

return {
            getCategories: function () {
                return $http.get(url2);
            }

Now i want the array of categories that I get from the server to be accessible in my Categories controller. I was using $rootScope before to share the date from usertype controller to the other one but its not the ideal thing to do. I want $scope.array to be accessible in my categories controller so i can display that in its view. What would be the best way to do this. Thanks a lot!

Sajeetharan · Accepted Answer · 2017-07-20 18:26:42Z

3

You should consider using a service in this case to share the data across your controllers.

SharedService.js

app.service('sharedService', function(){
  var categories = [];  
  names.add = function(incategories){
    categories = incategories;
  };
  names.get = function(){
    return categories;
  };     
});

then inject in your controller1 and controller2 and use depending on your requirement.

 app.controller("TestCtrl", 
   function($scope,sharedService) {
    $scope.categories =[];
    $scope.save= function(){
      sharedService.add(yourcat);
    }   
   }
  );

and then use it as,

 app.controller("TestCtrl2", 
   function($scope,sharedService) {      
   $scope.getcategories = function(){
     $scope.categories = sharedService.get();
   }
  }
 );

answered Jul 20, 2017 at 18:26

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

BleachedAxe Over a year ago

Hey Sajeetharan. I want the data to be displayed dynamically as soon as i click the button on the user type page. I don't want to be redirected to the category page and then having to press another button to view the categories. How would i do that? Thanks!

Sangwin Gawande · Accepted Answer · 2021-08-24 08:35:01Z

2

This will get you results instantly, No need of service or anything,You can use $broadcast for multiple controllers as well :

<div ng-app="myApp" ng-controller="myCtrl"> 

    <button ng-click="sendData();"></button>

</div>


<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($rootScope, $http) {
        function sendData() {
            var arrayData = [1,2,3];
            $rootScope.$emit('eventName', arrayData);
        }
    });
    app.controller('yourCtrl', function($rootScope, $http) {
        $rootScope.$on('eventName', function(event, data) {
            console.log(data); 
        }); 
    });
</script>

edited Aug 24, 2021 at 8:35

answered Jul 21, 2017 at 7:31

Sangwin Gawande

8,2448 gold badges53 silver badges67 bronze badges

2 Comments

JS Guru Over a year ago

In the controller 'yourCtrl', It should be $rootScope.$on(...) but not $scope.$on(...)

Sangwin Gawande Over a year ago

@JS Guru : Right.. Thanks

Collectives™ on Stack Overflow

AngularJS- How to pass data from one controller to another on ng-click()?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related