Use scope between controllers in Angularjs

Question

i have tow controllers in Angularjs and want to use scope between this controllers. in first controller i get data from server and put in scope.myData. this scope have many item that i write one item. in second controller i have query scope that init by myData.title scope from first controller. but myData.title scope is undefind for second controller while it have correct value. in fact not send myData.title value to init function while i write it such this {{myData.title}} in second controller display it value. what is my problem?

my code like this :

  app.controller("Controller1",function ($scope, $http) {
     $scope.myData = {
        title:""
      }
        $scope.getData = function(){
    if(marketerId != null){
        $http.get('/getData')
            .success(function(data, status, headers, config) {
                $scope.myData = data;
            })
            .error(function(error, status, headers, config) {
                console.log(status);
            });
       }
   };
  }

and my second controller is

   app.controller("Controller2",function ($scope, $http) {
       $scope.query = "";
       this.init = function (query) {
        $scope.query = query;
    }
   }

and in html page my code is :

      <div ng-controller='controller1 as c1'>
        <div ng-controller='controller2'>
            <input type='text' ng-model='query' ng-init='c1.init(myData.title)' >
        </div>
      </div>

Try to use factory or service.Its bad idea to share scope between controller — RIYAJ KHAN
– RIYAJ KHAN, Commented Aug 17, 2015 at 8:28

HaukurHaf · Accepted Answer · 2015-08-17 08:29:53Z

5

You could use the rootScope, which is shared between all controllers.

A better way would be to create a service which takes care of storing and fetching the data and have both controllers use this service. They can then both access the data.

answered Aug 17, 2015 at 8:29

HaukurHaf

13.9k6 gold badges47 silver badges62 bronze badges

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

Comments

Nishchit · Accepted Answer · 2015-08-17 08:41:47Z

0

There are some basic global rules for angulars.

1) Child controller access the scope of parent controller (Only if new scope not created in child).

2) For sharing data between two controller use service / factory .

For your example

  <div ng-controller='controller2'>
     <input type='text' ng-model='query' ng-init='query = myData.title'> 
  </div>

OR

 app.controller("Controller2",function ($scope, $http) {

      $scope.query = $scope.myData.title;   
 }

answered Aug 17, 2015 at 8:41

Nishchit

19.2k12 gold badges58 silver badges81 bronze badges

Comments

whoknows · Accepted Answer · 2015-08-17 09:49:18Z

0

Try this,

<div ng-controller='Controller1 as c1'>
    <div ng-controller='Controller2 as c2'>
        <input type='text' ng-model='query' ng-init='c2.init(c1.myData.title)' >
    </div>
</div>

**Be careful with your controller names, it should match with your js file.

**I recommend to always use controllerAs syntax, please also make your instance name more readable / understandable.

answered Aug 17, 2015 at 9:49

whoknows

3061 gold badge4 silver badges18 bronze badges

Comments

slou · Accepted Answer · 2015-08-17 14:02:10Z

0

You can create a Service like this :

 app.factory('SharedData', function(){
   var sharedData='';
   return {
      getSharedData : function(){
         return sharedData;
      },
      setSharedData : function(data){
         sharedData = data;
      }
   };
 })

Then in your 1 st controller add:

 app.controller("Controller1",function ($scope, $http, SharedData) {
     $scope.$watch('SharedData', function(data) {
         SharedData.setPricingData(data);
     });
 }

And in the 2nd one :

 app.controller("Controller2",function ($scope, $http, SharedData) {
     $scope.$watch(function() { return SharedData.getSharedData();  },
                function(data) {$scope.sharedData= data;});;
 }

answered Aug 17, 2015 at 14:02

slou

441 silver badge6 bronze badges

Collectives™ on Stack Overflow

Use scope between controllers in Angularjs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related