Anglejs에 대한 데이터 바인딩

이 기사에서는 특정 참조 값이 있는 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:

  1. ng-model 指令和 input 指令会被合并处理给 input 标签 注册 keydown事件(DOM Event)；

  2. interpolation 则注册一个 $watch 用来订阅 change 事件(angularjs Event)。

  2. Runtime Phase

  1. 用户输入触发 keydown

  2. input  指令捕获 keydown 事件，调用 $apply 来请求更新动作。

  3. angularjs 更新值到 Model

  4. 进入 $digest 上下文

  5. $watch 表达式检测到  Model   发生了 change，通知interpolation ，请求 更新 DOM。

  6. angularjs 托管结束，退出托管，交还控制权到 JavaScript 执行上下文。

  7. 最后浏览器重新渲染文本。

  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:

  1. interpolation 注册一个 $watch 用来订阅 change 事件(angularjs Event)。

  2. runtime phase：

  1. angularjs 进入 $digest 。

  2. expression 的 $watch 检测到数据发生变更，通知interpolation ，请求 更新 DOM。

  3. angularjs 托管结束，退出托管，交还控制权到 JavaScript 执行上下文。

  4. 最后浏览器重新渲染文本。

  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은 다양한 수명 주기마다 서로 다른 논리적 처리를 수행합니다. #🎜🎜#

1. #🎜🎜#컴파일 단계:#🎜🎜#
1. #🎜🎜#ng-model 지시문과 input 지시문이 input에 병합됩니다. 태그 등록 keydown 이벤트(DOM 이벤트) #🎜🎜#
2. #🎜🎜#보간은 $watch code>를 등록합니다. <code>change 이벤트(angularjs 이벤트)를 구독하는 데 사용됩니다. #🎜🎜#
2. #🎜🎜#런타임 단계#🎜🎜#
1. #🎜🎜#사용자 입력 트리거keydown#🎜🎜#
2. #🎜🎜#입력 명령 캡처keydown 이벤트가 발생하면 $apply를 호출하여 업데이트 작업을 요청하세요. #🎜🎜#
3. #🎜🎜#angularjs 값을 Model#🎜🎜#
4. #🎜🎜#으로 업데이트합니다. $digest 컨텍스트#🎜🎜#
5. #🎜🎜#$watch 표현식 감지 모델 발생change 입력 , 보간을 알리고 DOM 업데이트를 요청합니다. #🎜🎜#
6. #🎜🎜#angularjs 호스팅 종료, 호스팅 종료 및 제어권을 JavaScript 실행 컨텍스트로 반환합니다. #🎜🎜#
7. #🎜🎜#마지막으로 브라우저가 텍스트를 다시 렌더링합니다. #🎜🎜#

단방향 바인딩

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

1. #🎜🎜#컴파일 단계:#🎜🎜#
1. #🎜🎜#보간 change 이벤트를 구독하려면 $watch를 등록하세요( anglejs 이벤트). #🎜🎜#
2. #🎜🎜#런타임 단계：#🎜🎜#
1. #🎜🎜#angularjs는 $digest를 입력합니다. #🎜🎜#
2. #🎜🎜#expression의 $watch는 데이터 변경을 감지하고 보간을 알리고 요청합니다. DOM을 업데이트하세요. #🎜🎜#
3. #🎜🎜#angularjs 호스팅 종료, 호스팅 종료 및 제어권을 JavaScript 실행 컨텍스트로 반환합니다. #🎜🎜#
4. #🎜🎜#마지막으로 브라우저가 텍스트를 다시 렌더링합니다. #🎜🎜#

일회성 바인딩

#🎜🎜#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， 数据转化为最终态。

结束

在我看来，angularjs  核心在于 angularjs context 和 $digest 。

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

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

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

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

相关推荐：

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

addEventListener中的EventListener的接口对象

위 내용은 Anglejs에 대한 데이터 바인딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!