$rootScope.$watch not working with object in Angularjs

Question

I have got two controllers. I define a $rootScope variable in parent controller and change it according to clicked dropdown.

I want the change to be reflected in the child controller.

Parent Controller

$rootScope.variable = {'attr1':true, 'attr2':false, 'attr3':false}//initializing
vm.clickedDropDown = function(index) {
    $rootScope.variable = {'attr1':false, 'attr2':false, 'attr3':false }
    switch (index) {
        case 1: 
            $rootScope.variable={'attr1':true, 'attr2':false, 'attr3':false}
            break;
        case 2: 
            $rootScope.variable={'attr1':false, 'attr2':true, 'attr3':false}
            break;
        case 3: 
            $rootScope.variable={'attr1':false, 'attr2':false, 'attr3':true}
            break;
    }
}

Child Controller

$rootScope.$watch($rootScope.variable,function(){
  console.log($rootScope.variable);
  console.log("changed");
},true)

The variable is changing and i am able to see the change in variable as output.

I would use $broadcast from parent to child controller. This approach is not expensive because broadcasting happens once. Anyways its not good practice regards your example. — Maxim Shoustin
– Maxim Shoustin, Commented Dec 9, 2015 at 18:28
well when you watch the $rootScope you dont need to specify it in the watch attribute so $rootScope.$watch('variable', function(newVal, oldVal,scope){//logix},true}); if this is a function then you need to return the function in the watcher.... as a rule of thumb if you dont have to watch though you should use $broadcast — Jony-Y
– Jony-Y, Commented Dec 9, 2015 at 18:32

AlexD · Accepted Answer · 2015-12-09 18:31:18Z

3

Your watch is wrong.

Either:

$rootScope.$watch('variable' ,function(){
  console.log($rootScope.variable);
  console.log("changed");
},true);

or

$rootScope.$watch(
    function() { 
        return $rootScope.variable; 
    },
    function(){
        console.log($rootScope.variable);
        console.log("changed");
    },true);

answered Dec 9, 2015 at 18:31

AlexD

4,3306 gold badges42 silver badges66 bronze badges

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

1 Comment

Alaksandar Jesus Gene Over a year ago

Option 2 worked out. Thanks. will mark it correct answer in few minutes

emran · Accepted Answer · 2015-12-09 18:35:59Z

0

You can simply use scope because the child controller will inherit the parent controller and have access to any scope variables defined in scope and rootScope

HTML:

<div ng-controller="MyCtrl">
  <input type="text" ng-model="name">
  <div ng-controller="ChildCtrl">
    <pre>{{ debug }}</pre>
  </div>
</div>

JS:

function MyCtrl($scope, $rootScope) {
    $rootScope.name = 'Superhero';
}

function ChildCtrl($scope, $rootScope) {

    $rootScope.debug = '';

    $scope.$watch('name', function(newVal, oldVal) {
        $scope.debug += " value changed...";
    });
}

jsfiddle: http://jsfiddle.net/heavyhorse/aqbhco7m/

answered Dec 9, 2015 at 18:35

emran

9226 silver badges13 bronze badges

1 Comment

Jon Over a year ago

Take care of primitive type and inherence of scopes

Collectives™ on Stack Overflow

$rootScope.$watch not working with object in Angularjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related