Angularjs $parse, $eval and $observe, $watch detailed _angularjs

$parse and $eval

Both $parse and $eval can parse the value of an expression.

The difference is that $parse is a service that can be injected into use. $eval is a method on the scope object and we can only use it in scenarios where scope is accessible.

var getter = $parse (' User.Name ');
var setter = getter.assign;
var context = {User: {name: ' John Doe '};
var locals = {User: {name: ' Doe John '};

Getter (context); John Doe
Setter (context, ' new name ');
Getter (context); New name
getter (context, locals);//doe John

The $parse service receives an expression as a parameter and returns a function. This function can be invoked, where the argument is a context object, usually the scope.
In addition, this function has a assign attribute. It is also a function that can be used to change the value of an expression in a given context. The last line of code demonstrates how to use locals to overwrite a context object.

$eval is much simpler to use because its context is already specified as a scope object.

var scope = $rootscope. $new (true);
Scope.a = 1;
scope.b = 2;
Scope. $eval (' A + B ')//3
scope. $eval (function (scope) {return
 scope.a + scope.b;
}); /3

As for the relationship between $parse and $eval, we can see from the angular source code that $eval is to allow $parse to use more convenient grammatical sugars in scope.

$eval: function (expr, locals) {return
 $parse (expr) (this, locals);

$eval have a sibling, $evalAsync, it does not immediately compute the value of an expression, but rather caches the expression until the next $digest (Dirty Check) is performed. To get better performance.

$observe and $watch

Both $observe and $watch can listen for changes in the value of an expression. But there are significant differences.
$observe is a method of the third parameter (attrs) of the link function in the angular instruction. It can only be used in the command's link function. It is monitored through the $evalasync function.

$watch is a method on the scope object, the watch expression is flexible, can be a function, can be a property on scope, or it can be an expression in a string form. When listening for a property name or expression on scope, the $parse service is used to convert the expression to a function that is invoked in $digest. The third parameter, "Objectequality," $watch, specifies how the object is compared, or, if true, angular.equals, otherwise the reference is directly compared. The default is False.

HTML
<div book= ' {book.name}} ' ></div>
//js
attrs. $observe (' book ', Function (newvalue) {
 //just have one parameter, can ' t get old value
});
Scope. $watch (Attrs.book, function (NewValue, oldValue) {
 //get undefined
});

When you need to listen for a DOM attribute that contains "{{}}", use $observe, and if you use $watch, you can only get undefined. On the contrary, use $watch. If you use $observe, you can only get a fixed string.

HTML
<div book= "Book.name" ></div>
//js
attrs. $observe (' book ', Function (newvalue) {
 //always get ' book.name '
});
Scope. $watch (Attrs.book, function (NewValue, oldValue) {
});

There is a special case when your directive uses a separate scope (scope:{}), and those DOM attributes that have the "@" syntax applied, can be $watch even if they contain "{{}}".

Because the @ prefix identifier, its implementation is through $observe to listen to the changes in DOM properties, this is why the @attr value can only be a string or "{{}}", not a property on the scope, so the expression that the final $watch sees is no "{{}}". and "=" and "&" is based on the $watch implementation. So =attr, the value of &attr cannot contain ' {{}} ', but you can use the properties on scope directly.

$watchGroup and $watchcollection

$watchGroup is used to listen for a set of expressions. The change of any expression in the array triggers the listener function.

$scope. Teamscore = 0;
$scope. Time = 0;
$scope. $watchGroup ([' Teamscore ', ' time '], function (newval, oldval) {
 //newval and Oldval are array
});

$watchCollection is used to listen for an object (including an array) that triggers a listener function when any property of that object changes. As with $watch, the first argument can be a function that returns an object.

$scope. Names = [' Igor ', ' Matias ', ' Misko ', ' James '];
$scope. datacount = 4;

$scope. $watchCollection (' names ', function (newval, oldval) {
 $scope. datacount = newval.length;
});

$timeout (function () {
  $scope. Names.pop ();
},2000);

$observe, $watch, $watchGroup, $watchCollection returns a function to remove the listener. When you need to cancel the listener, call directly.

var off = scope. $watch (' name ', function (NewValue, oldValue) {
});
Off ();

Above is the Angularjs $parse, $eval and $observe, $watch knowledge, thank you for your support for this site!