数据->模板->数据->模板
最后更新于:2022-04-01 22:38:44
### 6.3. 数据->模板->数据->模板
现在要考虑的是一种在现实中很普遍的一个需求。比如就是我们可以输入数值,来控制一个矩形的长度。在这里,数据与表现的关系是:
- 长度数值保存在变量中
- 变量显示于某个 input 中
- 变量的值即是矩形的长度
- input 中的值变化时,变量也要变化
- input 中的值变化时,矩形的长度也要变化
当然,要实现目的在这里可能就不止一种方案了。按照以前的做法,很自然地会想法,绑定 _input_ 的 _change_ 事件,然后去做一些事就好了。但是,我们前面提到过 _ng-model_ 这个东西,利用它就可以在不手工处理 _change_ 的条件下完成数据的展现需求,在此基础之上,我们还需要做的一点,就是把变化后的数据应用到矩形的长度之上。
最开始,我们面对的应该是这样一个东西:
我们从响应数据变化,但又不使用 _change_ 事件的角度来看,可以这样处理宽度变化:
var TestCtrl = function($scope, $element){
$scope.width = 100;
$scope.$watch('width',
function(to, from){
$element.children(':first').width(to);
}
);
}
使用 _$watch()_ 来绑定数据变化。
当然,这种样式的问题,有更直接有效的手段, ng 的数据绑定总是让人惊异:
';