angular watching date formatted string throws error

Question

In one of my angular 1.x controllers, I have the following watch statement

 $scope.$watch($scope.someData.timestamp, doSomething);

The timestamp property is either null, undefined or a string formatted as a timestamp, like "2016-05-31T09:34:01.61Z"

When the watchstatement is executed, I get the following error:

angular.js:11655 Error: [$parse:syntax] Syntax Error: Token 'T09' is an unexpected token at column 11 of the expression [2016-05-31T09:34:01.61Z] starting at [T09:34:01.61Z]. http://errors.angularjs.org/1.3.15/$parse/syntax?p0=T09&p1=is%20an%20unexpected%20token&p2=11&p3=2016-05-31T09%3A34%3A01.61Z&p4=T09%3A34%3A01.61Z
    at https://localhost:44555/bower_components/angular/angular.js:63:12
    at Parser.throwError (https://localhost:44555/bower_components/angular/angular.js:12070:11)
    at Parser.parse (https://localhost:44555/bower_components/angular/angular.js:12023:12)
    at $parse (https://localhost:44555/bower_components/angular/angular.js:12737:39)
    at Scope.$watch (https://localhost:44555/bower_components/angular/angular.js:13897:19)
    at initialize (https://localhost:44555/app/MyCtrl.js:49:20)
    at new MyCtrl (https://localhost:44555/app/MyCtrl.js:18:9)
    at invoke (https://localhost:44555/bower_components/angular/angular.js:4203:17)
    at Object.instantiate (https://localhost:44555/bower_components/angular/angular.js:4211:27)
    at https://localhost:44555/bower_components/angular/angular.js:8501:28 <ui-view class="ng-scope">

To me, it looks like angular is trying to compile and evaluate the property value. But why?

If I change the watch statement, using the function syntax instead, everything works as expected:

$scope.$watch(function(){return $scope.someData.timestamp; }, doSomething);

Why is the value parsed?
How can I prevent the watched property from being parsed?

Aman Gupta · Accepted Answer · 2016-06-01 10:11:47Z

2

According to doc, the variable name should be inside quotes like this:

$scope.$watch('someData.timestamp', function(){...})

answered Jun 1, 2016 at 10:11

Aman Gupta

3,8174 gold badges47 silver badges67 bronze badges

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

2 Comments

csharpfolk Over a year ago

alternatively you may use a function $scope.$watch(function() { return variableHere; }, function() { ... })

Vegar Over a year ago

Yes, the quotes are doing the trick. Actually, I just found it my self. Not by reading the docs, but by referencing the fantastic book 'Build your own AngularJs' And the explanation is of cause that the $watch method is expecting an expression, so when I give it a value, it expects that value to be an expression...

frane · Accepted Answer · 2016-06-01 10:21:47Z

0

Have you tried:

$scope.$watch(someData.timestamp, doSomething);

You should use $watchCollection for watching object changes, or $watch for watching scope properties.

answered Jun 1, 2016 at 10:21

frane

651 silver badge7 bronze badges

1 Comment

Vegar Over a year ago

I'm watching a single property, so no need for $watchCollection. And you, as me, are missing the necessary quotes :-)

Collectives™ on Stack Overflow

angular watching date formatted string throws error

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related