Get "$scope" from another Controller


#1

Hi can you help me, how can I pass the $scope from another controller?

 .controller('Ctrl_1',function($scope){
      
          $scope.showNoti= "true"

})
    
//passed the $scope.showNoti here 
    .controller('Ctrl_2',function($scope){
  
      $scope.get($scope.showNoti); ????

})

#2

You could use $rootScope instead of $scope.
Every value you add to the rootScope is accessible in every other controller.


#3

Can you give me some example in using rootScope in passing values ? Thanks


#4

I’ve modified your orginal snippet

 .controller('Ctrl_1',function($rootScope){
      
          $rootScope.showNoti= "true"

})
     
    .controller('Ctrl_2',function($rootScope){
  
      alert("Yay! " + $rootScope.showNoti);

})

#5

Wow ! That’s Cool, Thanks ! :smile:


#6

You’d better define a service to manage your data.


#7

Can you give some example of what your saying ? Thanks :smile:


#8

#9

How about showing the div section from another controller ?

    // Html Doc
<ion-content ng-controller="controller_1">

    <div ng-show="showThis">
          <h2> Hello World </h2>
    </div>

</ion-content>

    //Controller_1.js
    .controller('Ctrl_1' , function($scope){
    
    $scope.showThis = true;
    })



    //Controller_2.js
   //show the div section here
    .controller('Ctrl_2' , function($scope){
    
    $scope.showThis;

    });

#10

Hi,

@gmarziou is right, you’d better define a service in this case to share data to anywhere you want. It will be something like this:

var app = angular.module('YOUR_APP_NAME', []);

app.service('ShareService', ShareService);

function ShareService() {
  // Private variable
  var data = {}; 

  // The object which will be expose as service api
  var service = {};
  service.getName = getName;
  service.setName = setName;

  return service;

  // Define service methods
  function getName() {
    return data.name || '';
  }

  function setName(name) {
    data.name = name;
  }
}

// And then you can use it in other controllers, directives or services, just inject it
app.controller('TestController', function ($scope, ShareService) {
  // Do something...

  $scope.name = ShareService.getName();
  $scope.setName = ShareService.setName;
});

app.directive('test', function (ShareService) {
  return {
    restrict: 'E',
    template: '<span>{{ name }}</span>',
    link: postLink
  };

  function postLink(scope) {
    scope.name = ShareService.getName();
  }
});

// ...

It is better to read the Angular documentation. :smile:

Best


#11

You should probably get that data from service like others suggested. But you can also look into scope broadcast and emit events that can pass values.


#12

+1, broadcast events is a good way to pass value as well.


#13

I know a service is the way to go, but what about declaring a global var?

var values = {}

Controller 1

Controller 2

Both these controllers will have access to the values variable.


#14

The best way for your use case is to use Services. Yes you can use $rootScope, and I do use rootScope sometimes, but 90% of the time using a Service will be better, it doesn’t take long to learn.

I’ve got a video that explains this, if you want to skip the parts on dependancy injects the important stuff is from 4 mins in (the video is only 5 mins).


#15

@Tarik is this what your saying?

var values = {
$scope.showNoti = true;
}

Controller 1
$scope.showNoti;
Controller 2
$scope.showNoti;

#16

@emsee71 This is what I’m saying

var values = {};
values.item = "something";

app.controller('FirstController', function ($scope) {    
   $scope.item = values.item;
});

app.controller('SecondController', function ($scope) {    
    $scope.item = values.item;
});

This way the value is accessible by both controllers. Is there something wrong with this method?


#17

@jawache Thanks for the link , I’m gonna try this :slight_smile:


#18

i used rootscope but when i am accessing rootscope variable in another controller it is showing undefined.