angularjs directive watch not fired on object function property

Question

TL;DR: updating a property on a watched object does not seem to fire the watch when the property is a function .

Live example

The config object's properties can be changed by clicking the buttons in the example. The objects are in sync (between directive and controller), and the $watch function in the directive (which simply ups a counter in this case) is called when a property is changed. Except when a function property is changed, which is what I do not understand.

Dead example

View

<main-dir config="configObject"></main-dir>

Directive

myApp.directive('mainDir', function () {

    return {
        restrict: 'E',
        scope: {config: '='},
        link: function (scope, el) {

            //(initialisation code)
                           
            scope.$watch("config", function (config) {
                if (!config) return;
                // do stuff with config object
            }, true);

         }
     };
 });

Controller

//init:
$scope.configObject = {
    propA: "value",
    propB: [1,2,3],
    propC: {key0: 3, key1: "value"},
    propD: function(x) {return x+1;}
}

//elsewhere:
$scope.configObject.propA = "other value"; //fires watch in directive
//or
$scope.configObject.propB = [3,2,1]; //fires watch in directive
//or
$scope.configObject.propB.push(5); //fires watch in directive
//or
$scope.configObject.propC = {key0: 1, key2: 34}; //fires watch in directive
//or
$scope.configObject.propC["key100"] = "newValue"; //fires watch in directive
//
// ... BUT ...
//
$scope.configObject.propD = function (x) {return x+2;} //does NOT fire watch in directive

So, in short: I can get the $watch to fire on changes to the object's properties. But that doesn't seem to work if the property is a function.

Workaround:
When changing a property that is a function, I add a line changing a non-function property to fire the watch, like so:

$scope.configObject.propD = function (x) {/*...new function def...*/};
$scope.configObject.xxx = Math.random(); //<-- causes watch to fire

Does anyone know why that is the case? Can I get the $watch to fire also on changes to function properties of the config object?

Thanks!

Artur Kupiec · Accepted Answer · 2014-10-21 18:06:41Z

1

scope.$watch("config.propD") will watch reference to function instead of returning value scope.$watch("config.xxx") will watch return value from Math.random because you called function

Simplest way is to use $watchCollection documentation but it's not perfect one

  scope.$watchCollection('config',
    function(config) {
      scope.caught++;
    }
  );

Another way is to program collection of $watch'ers it's work slightly better:

  angular.forEach(scope.config, function(value, key) {
    scope.$watch(function() {
      return scope.config[key];
    }, function(config) {
      scope.caught2++;
    }, true);
  });

edited Oct 21, 2014 at 18:06

answered Oct 19, 2014 at 11:11

Artur Kupiec

614 bronze badges

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

9 Comments

ElRudi Over a year ago

But I want to pass a function as propC - not its return value. The function is then used in the directive's link. Of course, it's more useful then returning 8.

Artur Kupiec Over a year ago

But you want to $watch return value of function? So the ex I provided should work even if you pass function to directive

ElRudi Over a year ago

Hmm I'm not sure if I follow. config is an object, with various properties that I want to use in the directive. The directive should notice a change in the properties' values, even if a property is a function definition. (Imagine changing config.propC = function(x){return x^2;} to config.propC = function(x){return x^3;}. I could put a dedicated watch on config.propC, but I use a config object because it groups all related information needed to handle a change in either one of its properties. I hope that makes sense.

ElRudi Over a year ago

I could, I suppose, turn the config object (config = {propA: "val", propB: [1,2,3], propC: function(x){return x^2;}) into a config function returning that object (config = function(){return {propA: "val", propB: [1,2,3], propC: function(x){return x^2;};}) and then $watch not config but config(), but it seems unnecessarily complex. Moreover, I could then no longer individually change the property values of the object, defeating its purpose.

ElRudi Over a year ago

Hey Artur, thank you for your update. I've added a Plunker example to further clarify my issue (and changed the original question to reflect it) further, please have a look if you want. The problem with your edited approach is that the second $watch must do the exact same thing as the first. I could add a function that is called by both, but this is very unelegant and I cannot imagine there is not a better solution...

|

Collectives™ on Stack Overflow

angularjs directive watch not fired on object function property

Live example

Dead example

View

Directive

Controller

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Live example

Dead example

View

Directive

Controller

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related