1

I have a date filtering string in my scope.

$scope.myModel = {date:""};

I also have a jQuery datepicker

<input date-value="myModel.date" date-picker />

that updates this string inside a directive (using AngularJS - Attribute directive input value change)

.directive('datePicker', function ($timeout) {
  return {
    scope: {
      dateValue: "=?",
    },
    link : function (scope, elem, attrs) {
      $timeout(function() {
        elem.data('date-value', scope.dateValue);
        elem.bind('change paste', function (blurEvent) {
          if (elem.data('date-value') != elem.val()) {
            console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val());
            elem.data('date-value', elem.val());
            scope.dateValue = elem.val();
          }
        });
      });
    },

  };
});

The root scope date is getting updated correctly and I can successfully send it to a sever, but I want to do something when the date changes. My function gets called once on the page's initialization and then it never does again.

$scope.$watch("myModel.date", function(newVal, oldVal) {
  console.log("newVal: " + newVal + '  oldVal:' + oldVal);
  if (newVal == oldVal) {
    return;
  }
  // do something 
});

What am I doing wrong here?

1
  • Add scope.$apply in your directive after the scope.dateValue = elem.val();
    – Scottie
    Feb 6, 2015 at 3:29

2 Answers 2

1

I read in some other stack overflow post that you could force checks on your scope through scope.apply() but the scope in my digest was not the same scope as in my controller. So this works, but I don't know enough about angular and digests to explain why.

elem.bind('change paste', function (blurEvent) {
          if (elem.data('date-value') != elem.val()) {
            console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val());
            elem.data('date-value', elem.val());
            scope.dateValue = elem.val();
            if (!scope.$$phase) {scope.$apply();}
          }
        });

Anyways this seemed too convoluted and the element bind was triggering when I clicked into the box before I was done selecting. I ended up going with setting up a function call on the onClose on the jQuery datePicker params.

datePickerParams = {
    controlType     : "select",
    timeFormat      : "hh:mm TT",
    onClose         : function(dateText, inst) {
                          $scope.myModel.dateText = dateText;
                          // do stuff
                      }
};

and then just passing it to the directive.

.directive('datePicker', function ($timeout) {
  return {
    scope: {
      datetimePickerParams: "=",
    },
    link : function (scope, elem, attrs) {
      $timeout(function() {
        elem.datetimepicker(scope.datetimePickerParams)
      });
    },
  };
});

(maybe it's time to check out angular date pickers and move away from jquery ones. )

0
0

Have you tried calling the $watch with true as third argument?

$scope.$watch("myModel.date", function(newVal, oldVal) {
  console.log("newVal: " + newVal + '  oldVal:' + oldVal);
  if (newVal == oldVal) {
    return;
  }
  // do something 
}, true);

This will check for the value equality rather than the reference equality.

Check the documentation for $watch here to understand the role of third parameter [objectEquality]. Basically setting it to true causes => "Compare for object equality using angular.equals instead of comparing for reference equality."

Moreover, it probably would be better to watch a boolean flag rather than the object. Toggle the boolean flag on change of your `myModel.date' and watch that flag instead. That would reduce performance overhead - checking object is expensive than checking a boolean flag.

Hope this helps!

1
  • yea i read this in one of the many other "angularjs scope watch not working" threads but it did not work for me.
    – James
    Feb 7, 2015 at 0:24

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.