Home  >  Article  >  Web Front-end  >  Data binding for angularjs

Data binding for angularjs

不言
不言Original
2018-07-09 15:52:301613browse

This article mainly introduces the data binding of angularjs, which has certain reference value. Now I share it with everyone. Friends in need can refer to

Data binding of angularjs

There are three data binding methods in angularjs1.X for data synchronization and display. Before angularjs 1.3, angularjs only existed in two ways: two-way-binding and one-way-bindng, and then A binding mechanism called one-time-binding was introduced.

Currently there are the following three data binding methods in angularjs:

  • two-way-binding

  • one-way-binding

  • one-time-binding

##two-way-binding

## The role of

Two-way-binding in #angularjs is to associate Model and View. Data changes on either side will update the other side data. A common scenario is the input area on the page. Two-way binding can easily associate the value of the input control to the

data model

.

<input type="text" id="text"  ng-model="name"/>
Through

ng-model

we can easily combine the value of the input box (view) and name (Model) related. Under the action of two-way data flow, whether we modify the value of the input box or modify name, the other side will be updated to the new data in time.

ng-model

is a built-in directive of angularjs to implement two-way binding. ng-model In different life cycles, there are different logical processes.

    compilation phase:
    1. ##ng-model
    2. command and

      input command will The input tag is merged and processed to register the keydown event (DOM Event);

    3. interpolation
    4. then registers a

      $watch is used to subscribe to the change event (angularjs Event).

    5. Runtime Phase
  1. User input trigger
      keydown
    1. input
    2. The instruction captures the

      keydown event and calls $apply to request the update action.

    3. angularjs
    4. Update the value to

      Model

      Enter
    5. $digest
    6. Context

    7. $watch
    8. The expression detects that

      Model occurs and change is notified interpolation , requesting an update to DOM.

    9. angularjs
    10. The hosting ends, exits the hosting, and returns control to the JavaScript execution context.

      Finally the browser re-renders the text.
    11. One-way-binding
Different from the two-way flow of

Two-way-binding

,

one-way- The data flow direction of binding is one-way, that is, it will only flow from model to view, but not from view to model . Therefore, one-way-binding is used to display data, not to obtain input. In angularjs

,

one-way-binding has two syntaxes: ng-bind and {{expression} }.

<span ng-bind="name"> </span>
<span>{{name}}</span>
For one-way-binding, the internal mechanism is partially the same as

two-way-binding.

compilation phase:
    1. interpolation
    2. Register a

      $watch to subscribe change Event (angularjs Event).

    3. runtime phase:
  1. ##angularjs
      Enter
    1. $digest

      .

      expression
    2. 's
    3. $watch

      detects data changes, notifies interpolation, and requests to update DOM.

      angularjs
    4. The hosting ends, exits the hosting, and returns control to the JavaScript execution context.
    5. Finally the browser re-renders the text.

    6. one-time-binding
1.3

After that,

angularjs

implemented a function called one -time-binding mechanism. In essence, its mechanism is not much different from the other two methods, but it behaves differently when updating data. one-time-binding will also register

$watch

to monitor data changes, but it will detect data non-Undefined## for the first time # Cancel monitoring when necessary.

<span>{{::name}}</span>

对于上面的代码,假设 nameundefined -> angularjs -> angular ,最终渲染的结果是 angularjs ,而不是 angular 。 这就是 one-time-binding 的特殊之处,当 nameundefined 变化为 angularjs之后,被认定为 name 的状态已经是 stable ,因此将取消 $watch , 即不再监听数据变化。

那么,假设 name'' -> angularjs-> angular, 则渲染结果是 '' ,即空字符串(第一次的值)。因为 one-time-binding 在计算 stable 时候使用的 严格相等,即 newVal === undefined, 如果是,则继续保留 $watch 等待下一次的比较;否则,状态变更为 stable,取消 $watch, 数据转化为最终态。

结束

在我看来,angularjs  核心在于 angularjs context$digest

angularjs context 保证 angularjs 可以捕获到各种事件,用户输入、鼠标事件、键盘事件、甚至 $settimeout$http 等异步行为的状态流转。

$digest 则保证 angularjs 可以确认是否要更新数据。

文中难免存在一些错误,欢迎大家斧正。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

jQuery/Vue的鼠标移入移出效果

addEventListener中的EventListener的接口对象

The above is the detailed content of Data binding for angularjs. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn