CODEWITHSUNDEEP
angularjs
naik3
naik3

Reputation: 309

Accessing one controller data from another

I want to use data from one controller to another , can any one please help me. For example :

  .controller('firstCtrl',function($scope){
   $scope.item = [{id:1, name:'John'},{id:2, name:'carter'},{id:3, name:'barsoom'},..]
   })
   .controller('secondCtrl',function($scope){
    $scope.jsondata = item;
    console.log(JSON.stringify($scope.jsondata));
   })

Is it possible. can any one please help me. Thank you.

Upvotes: 0

Views: 541

Answers (3)

vipin Bhandari
vipin Bhandari

Reputation: 192

Try this

 <body ng-app="myApp">

    <div ng-controller="ctrl">
        {{name}}

    </div>

    <div ng-controller="c">
        {{name}}

    </div>


</body>

var app = angular.module('myApp', []).controller('ctrl', ['$scope', '$rootScope', function ($scope, $rootScope) {

    $rootScope.name = "vipin";

}]).controller('c', ['$scope', '$rootScope', function ($scope) {


}])

Run this code you can get $rootScope.name value in both controller 

var app = angular.module('myApp', []).controller('ctrl', ['$scope', '$rootScope', function ($scope, $rootScope) {

        $rootScope.name = "vipin";
    }]).controller('c', ['$scope', '$rootScope', function ($scope) {


    }])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

<body ng-app="myApp">    
    <div ng-controller="ctrl">
        {{name}}
    </div>

    <div ng-controller="c">
        {{name}}
    </div>
</body>

Upvotes: 1

Anita
Anita

Reputation: 2400

You can use event broadcast or Service to inject in controller.

Method 1:

myApp.controller('FirstCtrl', function ($scope) {
    $scope.$broadcast('Test_Data',{ data: {} });
  })
myApp.controller('SecondCtrl', function ($scope) {
    $scope.$on('Test_Data', function(event, args) {
        var data= args.data
      // do something useful here;
    });
  });

Method 2 :

     myApp.factory('TestData', function () {
        var data = {};
            var setData=function(){...}
        return data;
      });
    myApp.controller('FirstCtrl', function ($scope, TestData) {
        $scope.data = TestData;
      })

Upvotes: 0

Renan Ferreira
Renan Ferreira

Reputation: 2150

If you want to share data between controllers, you should use Angular Services. They are singleton that are intended to be used to share common code in your application. So, it is a good practice to put, for example, your $http request, or some data that is used in many places.

Some example would be:

https://jsfiddle.net/relferreira/2b5amcya/

JS:

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['UserService'];

function mainController(UserService){

    var vm = this;
  vm.name = UserService.getName();

}

angular.module('app')
    .controller('DetailController', detailController);

detailController.$inject = ['UserService'];

function detailController(UserService){

    var vm = this;
  vm.name = UserService.getName();
  vm.other = 'test';

}

angular.module('app')
    .factory('UserService', userService);

function userService(){
    var name = 'Renan'; 
  return{
    getName: getName
  }

  function getName(){
    return name;
  }
}

HTML:

<div data-ng-app="app">

  <div data-ng-controller="MainController as mainVm">
    {{mainVm.name}}
  </div>

  <div data-ng-controller="DetailController as detailVm">
    {{detailVm.name}}
    {{detailVm.other}}
  </div>

</div>

Upvotes: 1

Related Questions