A summary of Angularjs learning--$apply method and $watch method

Introduction

Recently, the $watch method was used to monitor the change of the value in the module when the control was encapsulated in the project.

Solution, so I found some information on the Internet to learn, the following small series to give you a brief introduction of some angularjs in the scope of providing $apply method of dissemination

Change of Model and $watch method to monitor module changes.

$apply Usage Scenarios

AngularJS external Controllers (DOM events, external callback functions such as jQuery UI space, etc.) call the AngularJS function and must

Must call $apply. In this case, you need to command AngularJS to refresh itself (model, view, etc.), $apply is used to do this thing

Of When we use the $apply method, as long as we can, please pass the code and function to execute to $apply to execute, and do not self-

Line those functions and then call $apply.

Let's look at a demo and write a timer to change the value of name after two seconds:

<! DOCTYPE html>
In the above code, if we do not use $apply to propagate the change of name value, we will write the code of $scope.name= "John Doe" directly in S

In the Ettimeout function, the value displayed on the interface does not change at all.

$watch method for monitoring module changes

$watch function can notify you when a part of your data model has changed. You can monitor the properties of a single object, or you can

Monitoring requires computed results (functions), as long as they can be accessed as a property, or can be computed as a JavaScript function

can be monitored by the $watch function. Its function signature is:
<span style= "Font-family:simsun;" >  $watch (WATCHFN, Watchaction, Deepwatch) </span>

WATCHFN parameter: This is our listener local target object, it is a string with angular expression or function;

Watchaction parameter: This is a function or expression that will be called when the WATCHFN is changed. If it is in the form of a function, it will receive

The new and old two values to WATCHFN, as well as a reference to the scope object. Its function signature is functions (NewValue, OldValue, scope).

Deepwatch parameter: If set to True, this optional boolean parameter will command angular to check if each property of the monitored object is sent

Have changed. If you want to monitor the elements in an array, or all the properties on an object, instead of just monitoring a simple value, you can use this

Parameters.

Here is a demo, when the cost of more than 100 when the freight is 0 or the shipping cost is 10:


<! DOCTYPE html>
$watch This function is often used in projects, we need to have a flexible grasp of this function so that we can customize the control or complete a

More complex needs are more convenient.

Summary

The above is a summary of the two methods of small series, these are relatively introductory knowledge, if you want to better understand this knowledge also need our project
In a good study. Source Address: Http://runjs.cn/code/ovjwuxhn

A summary of Angularjs learning--$apply method and $watch method