45

I'm writing a directive and I need to watch the parent scope for a change. Not sure if I'm doing this the preferred way, but its not working with the following code:

  scope.$watch(scope.$parent.data.overlaytype,function() {
    console.log("Change Detected...");
  })

This it logged on window load, but never again, even when overlaytype is changed.

How can I watch overlaytype for a change?

Edit: here is the entire Directive. Not entirely sure why I'm getting a child scope

/* Center overlays vertically directive */
aw.directive('center',function($window){
  return {
    restrict : "A",
    link : function(scope,elem,attrs){

      var resize = function() {
        var winHeight = $window.innerHeight - 90,
            overlayHeight = elem[0].offsetHeight,
            diff = (winHeight - overlayHeight) / 2;
            elem.css('top',diff+"px");
      };

      var watchForChange = function() {
        return scope.$parent.data.overlaytype;
      }
      scope.$watch(watchForChange,function() {
        $window.setTimeout(function() {
          resize();
        }, 1);
      })

      angular.element($window).bind('resize',function(e){
        console.log(scope.$parent.data.overlaytype)
        resize();
      });
    }
  };
});
5
  • Pretty sure you can't watch anything outside of local $scope. But you can put the $watch in the parent $scope and $scope.$broadcast the change down to the child $scope.
    – Sharondio
    Commented Jul 24, 2013 at 15:44
  • 1
    Since your directive does not create a new scope, you should be able to scope.$watch('data.overlaytype', ...). Here's a fiddle that shows this working. If you think you need to use $parent, then we'd need to see more of your HTML to determine if a child or isolate scope is being created by some other directive in the HTML. Commented Jul 24, 2013 at 17:56
  • @Sharondio But my child controller behaves by extending the parent controller. I don't want to write the $watch in the parent. I want to extend the parent so the parent doesn't need to explicitly have a $watch defined for a case that is specific to the child $scope. I wonder how to do this. FOr example, the child scope depends on the changes it sees in the parent scope, but this isn't always the case as other children don't necessarily depend on it, and I don't want to code a child-specific behavior into the parent. I want to keep things modular, with the child-specific behavior in the child.
    – trusktr
    Commented Apr 28, 2014 at 4:06
  • Aha! Petr Peller's answer seems like the solution, but it still won't work for me. I'll post back when I find out for others who might stumble on this.
    – trusktr
    Commented Apr 28, 2014 at 4:16
  • Ok, so it's because directives like ngIf create child scopes, which is counter intuitive.
    – trusktr
    Commented Apr 28, 2014 at 21:19

5 Answers 5

77

If you want to watch a property of a parent scope you can use $watch method from the parent scope.

//intead of $scope.$watch(...)
$scope.$parent.$watch('property', function(value){/* ... */});

EDIT 2016: The above should work just fine, but it's not really a clean design. Try to use a directive or a component instead and declare its dependencies as bindings. This should lead to better performance and cleaner design.

6
  • I'm trying this, but I'm trying to watch for changes to an array, so i'm using true as the third parameter for deep watch, but still nothing happens a child scope modifies the array of the parent scope. Hmmm....
    – trusktr
    Commented Apr 28, 2014 at 18:13
  • Aha. For some yet-to-be-explained reason, the app is mysteriously creating an extra scope between my intended parent and child, so I have to do $scope.$parent.$parent.$watch('property', function(value){/* ... */});. I'll comment when I find out why.
    – trusktr
    Commented Apr 28, 2014 at 19:18
  • 1
    Ok, so it's because directives like ngIf create child scopes, which is counter intuitive.
    – trusktr
    Commented Apr 28, 2014 at 21:18
  • @trusktr Yeah, many directives create a child scope. You can see that these directives usually add ng-scope class to its element. You can use ngShow instead of the ngIf as a workaround. Commented Apr 29, 2014 at 9:02
  • @PetrPeller I have seen this type of parent level watchers on my project, usage of the watchers on parent level data inside child directive controller is causing my page taking long to get rendered, I am able to see lot of difference in loading time if I simply remove the parent level watchers, do you have any suggestions to solve the performance issues with this approach?
    – Siva
    Commented Nov 10, 2016 at 12:57
23

I would suggest you to use the $broadcast between controller to perform this, which seems to be more the angular way of communication between parent/child controllers

The concept is simple, you watch the value in the parent controller, then, when a modification occurs, you can broadcast it and catch it in the child controller

Here's a fiddle demonstrating it : http://jsfiddle.net/DotDotDot/f733J/

The part in the parent controller looks like that :

$scope.$watch('overlaytype', function(newVal, oldVal){
    if(newVal!=oldVal)
        $scope.$broadcast('overlaychange',{"val":newVal})
});

and in the child controller :

$scope.$on('overlaychange', function(event, args){
    console.log("change detected")
    //any other action can be perfomed here
});

Good point with this solution, if you want to watch the modification in another child controller, you can just catch the same event

Have fun

Edit : I didn't see you last edit, but my solution works also for the directive, I updated the previous fiddle ( http://jsfiddle.net/DotDotDot/f733J/1/ )

I modified your directive to force it to create a child scope and create a controller :

directive('center',function($window){
  return {
    restrict : "A",
    scope:true,
    controller:function($scope){
        $scope.overlayChanged={"isChanged":"No","value":""};
        $scope.$on('overlaychange', function(event, args){
        console.log("change detected")
        //whatever you need to do

    });
  },
link : function(scope,elem,attrs){

  var resize = function() {
    var winHeight = $window.innerHeight - 90,
        overlayHeight = elem[0].offsetHeight,
        diff = (winHeight - overlayHeight) / 2;
        elem.css('top',diff+"px");
  };
  angular.element($window).bind('resize',function(e){
    console.log(scope.$parent.data.overlaytype)
    resize();
      });
    }
  };
});
2
  • @DotDotDot do we have any performance improvement of using BROADCAST instead of child level WATCHERS ?
    – Siva
    Commented Nov 10, 2016 at 12:51
  • Thank you, a nice clean approach. Commented Dec 13, 2018 at 16:24
7

You should have the data property on your child scope, scopes use prototypal inheritance between parent and child scopes.

Also, the first argument the $watch method expects is an expression or a function to evaluate and not a value from a variable., So you should send that instead.

6
  • Hrm, I don't have the data property at all. Not even sure why I have a child scope within this directive, the div is inside the normal scope. Any ideas?
    – wesbos
    Commented Jul 24, 2013 at 15:48
  • Oh, the function as the first argument was it! I made a function that returned scope.$parent.data.overlaytype and it worked great. thanks :)
    – wesbos
    Commented Jul 24, 2013 at 15:51
  • @Wes you shouldn't refer to $parent. You should instead make a variable that you can pass through the parent's scope's model or some property of it. If you show your whole directive this answer can be edited to include how you should pass through the object. Commented Jul 24, 2013 at 15:51
  • You're probably using isolate scope. You can pass in the value you need from the parent scope via attribute, I'll edit the answer with complete details.
    – Naor Biton
    Commented Jul 24, 2013 at 15:58
  • Thanks @NaorBiton as you said I was putting together a fiddle to show isolate scope. Commented Jul 24, 2013 at 15:59
7

If you're looking for watching a parent scope variable inside a child scope, you can add true as second argument on your $watch. This will trigger your watch every time your object is modified

$scope.$watch("searchContext", function (ctx) {
                ...
            }, true);
1
  • Not sure why this wasn't more upvoted. It's simple and works perfectly.
    – ereOn
    Commented Aug 2, 2016 at 17:35
2

Alright that took me a while here's my two cents, I do like the event option too though:

Updated fiddle http://jsfiddle.net/enU5S/1/

The HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <input type="text" model="model.someProperty"/>
    <div awesome-sauce some-data="model.someProperty"></div>
</div>

The JS

angular.module("myApp", []).directive('awesomeSauce',function($window){
  return {
    restrict : "A",
      template: "<div>Ch-ch-ch-changes: {{count}} {{someData}}</div>",
      scope: {someData:"="},
      link : function(scope,elem,attrs){
        scope.count=0;
        scope.$watch("someData",function() {
            scope.count++;
        })
    }
  };
}).controller("MyCtrl", function($scope){
    $scope.model = {someProperty: "something here");
});

What I'm showing here is you can have a variable that has two way binding from the child and the parent but doesn't require that the child reach up to it's parent to get a property. The tendency to reach up for things can get crazy if you add a new parent above the directive.

If you type in the box it will update the model on the controller, this in turn is bound to the property on the directive so it will update in the directive. Within the directives link function it has a watch setup so anytime the scope variable changes it increments a counter.

See more on isolate scope and the differences between using = @ or & here: http://www.egghead.io/

3
  • Just FYI, you don't need to define a function to watch a scope property, and you don't need true as the third parameter (that's what the fiddle has). So, you can simply write: scope.$watch('someData',function() { scope.count++; });. Commented Jul 24, 2013 at 18:02
  • @MarkRajcok ah yeah I was using the wrong property name at first and wasn't seeing the updates, will fix my fiddle. Thx Commented Jul 24, 2013 at 18:10
  • 1
    👌 great solution +1 for usage of awesomeSauce
    – a2f0
    Commented Nov 9, 2017 at 3:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.