이 기사에서는 특정 참조 값이 있는 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
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
在不同生命周期中,有不同的逻辑处理。
compilation phase:
ng-model
指令和 input
指令会被合并处理给 input
标签 注册 keydown
事件(DOM Event);
interpolation
则注册一个 $watch
用来订阅 change
事件(angularjs Event)。
Runtime Phase
用户输入触发 keydown
input
指令捕获 keydown
事件,调用 $apply
来请求更新动作。
angularjs
更新值到 Model
进入 $digest
上下文
$watch
表达式检测到 Model
发生了 change
,通知interpolation
,请求 更新 DOM
。
angularjs
托管结束,退出托管,交还控制权到 JavaScript 执行上下文。
最后浏览器重新渲染文本。
不同于 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
有部分相同的机制。
compilation phase:
interpolation
注册一个 $watch
用来订阅 change
事件(angularjs Event)。
runtime phase:
angularjs
进入 $digest
。
expression
的 $watch
检测到数据发生变更,通知interpolation
,请求 更新 DOM
。
angularjs
托管结束,退出托管,交还控制权到 JavaScript 执行上下文。
最后浏览器重新渲染文本。
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
, 数据转化为最终态。
在我看来,angularjs
核心在于 angularjs context
和 $digest
。
angularjs context
保证 angularjs
可以捕获到各种事件,用户输入、鼠标事件、键盘事件、甚至 $settimeout
和 $http
等异步行为的状态流转。
而 $digest
则保证 angularjs
可以确认是否要更新数据。
文中难免存在一些错误,欢迎大家斧正。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
addEventListener中的EventListener的接口对象
위 내용은 Anglejs에 대한 데이터 바인딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!