Anglejs의 데이터 바인딩 도입에 대한 자세한 설명은 다음과 같습니다.

이 글에서는 angularjs의 데이터 바인딩에 대해 소개합니다. Anglejs를 사용한 데이터 바인딩에 대한 다양한 방법과 예제 코드가 모두에게 도움이 되기를 바랍니다. 지금 이 글을 함께 읽어보세요

angularjs 데이터 바인딩

Angularjs1.X에는 데이터 동기화 및 표시에 사용되는 세 가지 데이터 바인딩 방법이 있습니다. angularjs 1.3 이전에는 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>

通过 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> </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에는 다음 세 가지 데이터 바인딩 방법이 있습니다:

• two-way-bind🎜
• 🎜단방향 바인딩🎜
• 🎜일회성 바인딩🎜

양방향 바인딩

🎜angularjs 양방향 바인딩의 기능은 모델과 보기를 연결하는 것입니다. 🎜🎜일반적인 시나리오는 페이지의 입력 영역입니다. 양방향 바인딩을 사용하면 입력 컨트롤 값을 🎜데이터 모델🎜에 쉽게 연결할 수 있습니다. 🎜

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

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

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

단방향 바인딩

🎜 양방향 바인딩의 양방향 흐름과는 다른 단방향 - -bind의 데이터 흐름 방향은 단방향입니다. 즉, model에서 view로만 흐르고 보기를 모델로 변경하세요. 따라서 단방향 바인딩은 입력을 얻는 것이 아니라 데이터를 표시하는 데 사용됩니다. 🎜🎜angularjs 에서 one-way-bind에는 ng-bind 및 {{expression}} 라는 두 가지 구문이 있습니다. >. 🎜rrreee🎜단방향 바인딩의 경우 내부 메커니즘은 부분적으로 양방향 바인딩과 동일합니다. 🎜

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

일회성 바인딩

🎜1.3 그 후 angularjs는 일회성 바인딩 메커니즘. 본질적으로 해당 메커니즘은 다른 두 가지 방법과 크게 다르지 않지만 데이터가 업데이트될 때 다르게 동작합니다. 🎜🎜일회성 바인딩은 데이터 변경 사항을 모니터링하기 위해 $watch도 등록하지만 처음으로 🎜정의되지 않은 데이터🎜를 감지하면 모니터링을 취소합니다. . 🎜

<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 可以确认是否要更新数据。

本篇关于angularjs的文章到这也就结束了（想看更多就到PHP中文网angularjs参考手册中学习），有问题的可以在下方留言提问。

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