Anglejs에 대한 데이터 바인딩-JS 튜토리얼-php.cn

이 기사에서는 특정 참조 값이 있는 Anglejs의 데이터 바인딩을 주로 소개합니다. 이제는 모든 사람들과 공유합니다. 🎜#Angularjs1.X에는 데이터 동기화 및 표시를 위한 세 가지 데이터 바인딩 방법이 있습니다. angularjs 1.3 이전에는 angularjs가 two-way-bindng 및 one-way-bindng라는 두 가지 방식으로만 존재했습니다. , 일회성 바인딩이라는 바인딩 메커니즘이 도입되었습니다.

현재 `angularjs`에는 다음 세 가지 데이터 바인딩 방법이 있습니다.

양방향 바인딩angularjs 1.3 之前，angularjs 只存在两种方式： two-way-binding 和 one-way-bindng , 而后则引入了称为one-time-binding 的绑定机制。

目前angularjs 中存在以下三种数据绑定方式：
- two-way-binding
- one-way-binding
- one-time-binding
two-way-binding

angularjs 中的 Two-way-binding 的作用是将 Model 和 View 关联起来，任何一侧的数据变更都会更新另一侧的数据。

常见场景是页面中的输入区域。双向绑定可以很容易的将输入控件的值关联到数据模型中。
```
<input type="text" id="text"  ng-model="name"/>
```
로그인 후 복사
通过 ng-model 我们可以很容易的将输入框(view)的值和 name (Model) 关联起来。在双向数据流的作用下，无论是我们修改输入框的值还是修改 name，另外一侧都将及时更新到新数据。

ng-model 是 angularjs 内置的一个指令用来实现双向绑定。ng-model 在不同生命周期中，有不同的逻辑处理。
1. compilation phase:
2. Runtime Phase
One-way-binding

不同于 Two-way-binding的双向流动， one-way-binding 的数据流向是单向，即只会从 model 流向 view ，而不会从 view 流向 model。因此， one-way-binding 用来展示数据，而不是获取输入。

在 angularjs 中， one-way-binding 则有两种语法： ng-bind 和 {{expression}}。
```
<span ng-bind="name"> </span>
<span>{{name}}</span>
```
로그인 후 복사
对于 one-way-binding来说，内部机制和 two-way-binding 有部分相同的机制。
1. compilation phase:
2. runtime phase：
one-time-binding

1.3 之后，angularjs 实现了一个叫 one-time-binding 的机制。本质上它的机制和其他两种方式没太多差异，但在数据更新时候表现的不太一样。

one-time-binding 同样会注册 $watch
단방향 바인딩
일회성 바인딩#🎜🎜#

양방향 바인딩

#🎜🎜#angularjs의 양방향 바인딩은 모델과 보기는 연결되어 있으며 양쪽의 데이터 변경 사항은 반대쪽의 데이터를 업데이트합니다. #🎜🎜##🎜🎜#일반적인 시나리오는 페이지의 입력 영역입니다. 양방향 바인딩을 사용하면 입력 컨트롤의 값을 #🎜🎜#data model#🎜🎜#에 쉽게 연결할 수 있습니다. #🎜🎜#

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

로그인 후 복사

#🎜🎜#ng-model을 통해 입력 상자(view)와 name의 값을 쉽게 결합할 수 있습니다( 모델)이 연결되어 있습니다. 양방향 데이터 흐름 작업에 따라 입력 상자의 값을 수정하든 이름을 수정하든 상대방은 시간에 맞춰 새로운 데이터로 업데이트됩니다. #🎜🎜##🎜🎜#ng-model은 양방향 바인딩을 구현하기 위해 angularjs에 내장된 지시문입니다. ng-model은 다양한 수명 주기마다 서로 다른 논리적 처리를 수행합니다. #🎜🎜#

#🎜🎜#컴파일 단계:#🎜🎜#

#🎜🎜#ng-model 지시문과 input 지시문이 input에 병합됩니다. 태그 등록 keydown 이벤트(DOM 이벤트) #🎜🎜#
#🎜🎜#보간은 $watch code>를 등록합니다. <code>change 이벤트(angularjs 이벤트)를 구독하는 데 사용됩니다. #🎜🎜#

#🎜🎜#런타임 단계#🎜🎜#

#🎜🎜#사용자 입력 트리거keydown#🎜🎜#
#🎜🎜#입력 명령 캡처keydown 이벤트가 발생하면 $apply를 호출하여 업데이트 작업을 요청하세요. #🎜🎜#
#🎜🎜#angularjs 값을 Model#🎜🎜#
#🎜🎜#으로 업데이트합니다. $digest 컨텍스트#🎜🎜#
#🎜🎜#$watch 표현식 감지 모델 발생change 입력 , 보간을 알리고 DOM 업데이트를 요청합니다. #🎜🎜#
#🎜🎜#angularjs 호스팅 종료, 호스팅 종료 및 제어권을 JavaScript 실행 컨텍스트로 반환합니다. #🎜🎜#
#🎜🎜#마지막으로 브라우저가 텍스트를 다시 렌더링합니다. #🎜🎜#

단방향 바인딩

#🎜🎜#양방향 바인딩의 양방향 흐름과 다릅니다. code>, 단방향 바인딩의 데이터 흐름 방향은 단방향입니다. 즉, 모델에서 뷰로만 흐릅니다. , 그러나 view에서 model로 흘러가는 것은 아닙니다. 따라서 단방향 바인딩은 입력을 얻는 것이 아니라 데이터를 표시하는 데 사용됩니다. #🎜🎜##🎜🎜#angularjs에서 one-way-bound에는 ng-bind 및 {{라는 두 가지 구문이 있습니다. 표현식}}. #🎜🎜#rrreee#🎜🎜#단방향 바인딩의 경우 내부 메커니즘은 양방향 바인딩과 부분적으로 동일합니다. #🎜🎜#

#🎜🎜#컴파일 단계:#🎜🎜#

#🎜🎜#보간 change 이벤트를 구독하려면 $watch를 등록하세요( anglejs 이벤트). #🎜🎜#

#🎜🎜#런타임 단계：#🎜🎜#

#🎜🎜#angularjs는 $digest를 입력합니다. #🎜🎜#
#🎜🎜#expression의 $watch는 데이터 변경을 감지하고 보간을 알리고 요청합니다. DOM을 업데이트하세요. #🎜🎜#
#🎜🎜#angularjs 호스팅 종료, 호스팅 종료 및 제어권을 JavaScript 실행 컨텍스트로 반환합니다. #🎜🎜#
#🎜🎜#마지막으로 브라우저가 텍스트를 다시 렌더링합니다. #🎜🎜#

일회성 바인딩

#🎜🎜#1.3 그 다음에는 angularjs 일회성 바인딩이라는 메커니즘이 구현됩니다. 본질적으로 해당 메커니즘은 다른 두 가지 방법과 크게 다르지 않지만 데이터가 업데이트될 때 다르게 동작합니다. #🎜🎜##🎜🎜#one-time-bound는 데이터 변경 사항을 모니터링하기 위해 $watch도 등록하지만 처음으로 데이터를 감지합니다#🎜🎜 #无Undefine#🎜🎜# 필요한 경우 모니터링을 취소하세요. #🎜🎜#

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

로그인 후 복사

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

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