1、数据->模板
数据到表现的绑定，主要是使用模板标记直接完成的：
<p>{{ w }} x{{ h }}</p>
使用 {{ }}这个标记，就可以直接引用，并绑定一个作用域内的变量。在实现上， ng 自动创建了一个 watcher。效果就是，不管因为什么，如果作用域的变量发生了改变，我们随时可以让相应的页面表现也随之改变。我们可以看一个更纯粹的例子：
<p id="test" ng-controller="testctrl">{{ a }}</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('testctrl', function($scope){
$scope.a = '123';
});
angular.bootstrap(document.documentelement,['app']);
</script>
上面的例子在页面载入之后，我们可以在页面上看到 123。这时，我们可以打开一个终端控制器，输入：
$('#test').scope().a= '12345';
$('#test').scope().$digest();
上面的代码执行之后，就可以看到页面变化了。
对于使用 ng进行的事件绑定，在处理函数中就不需要去关心 $digest() 的调用了。因为 ng 会自己处理。中，对于 ng 的事件绑定，真正的处理函数不是指定名字的函数，而是经过 $apply() 包装过的一个函数。这个 $apply()做的一件事，就是调用根作用域 $rootscope 的 $digest() ，这样整个世界就清净了：
<p id="test" ng-controller="testctrl"ng-click="click()">{{ a }}</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('testctrl', function($scope){
$scope.a = '123';
$scope.click = function(){
$scope.a = '456';
}
});
angular.bootstrap(document.documentelement,['app']);
</script>
那个 click 函数的定义，绑定时变成了类似于：
function(){
$scope.$apply(
function(){
$scope.click();
}
)
}
这里的 $scope.$apply()中做的一件事：
$rootscope.$digest();
2. 模板->数据
模板到数据的绑定，主要是通过 ng-model 来完成的：
<input type="text" id="test" ng-controller="testctrl"ng-model="a"/>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('testctrl', function($scope){
$scope.a = '123';
});
angular.bootstrap(document.documentelement,['app']);
</script>
这时修改 input 中的值，然后再在控制终端中使用：
$('#test').scope().a
查看，发现变量 a 的值已经更改了。
实际上， ng-model是把两个方向的绑定都做了。它不光显示出变量的值，也把显示上的数值变化反映给了变量。这个在实现上就简单多了，只是绑定 change事件，然后做一些赋值操作即可。不过 ng 里，还要区分对待不同的控件。
3. 数据->模板->数据->模板
现在要考虑的是一种在现实中很普遍的一个需求。比如就是我们可以输入数值，来控制一个矩形的长度。在这里，数据与表现的关系是：
长度数值保存在变量中
变量显示于某个 input 中
变量的值即是矩形的长度
input 中的值变化时，变量也要变化
input 中的值变化时，矩形的长度也要变化
当然，要实现目的在这里可能就不止一种方案了。按照以前的做法，很自然地会想法，绑定input 的 change事件，然后去做一些事就好了。但是，我们前面提到过 ng-model 这个东西，利用它就可以在不手工处理 change 的条件下完成数据的展现需求，在此基础之上，我们还需要做的一点，就是把变化后的数据应用到矩形的长度之上。
最开始，我们面对的应该是这样一个东西：
<p ng-controller="testctrl">
<p style="width: 100px; height: 10px; background-color:red"></p>
<input type="text" name="width" ng-model="width" />
</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('testctrl', function($scope){
$scope.width = 100;
});
angular.bootstrap(document.documentelement,['app']);
</script>
我们从响应数据变化，但又不使用 change事件的角度来看，可以这样处理宽度变化：
angular.module('app',[], angular.noop)
.controller('testctrl',function($scope){
$scope.width = 100;
$scope.$watch('width',
function(to, from){
$element.children(':first').width(to);
}
);
});
使用 $watch() 来绑定数据变化。
当然，这种样式的问题，有更直接有效的手段， ng 的数据绑定总是让人惊异：
<p ng-controller="testctrl">
<p style="width: 10px; height: 10px; background-color:red" ng-style="style">
</p>
<input type="text" name="width" ng-model="style.width" />
</p>
<script type="text/javascript">
angular.module('app', [],angular.noop)
.controller('testctrl', function($scope){
$scope.style = {width: 100 + 'px'};
});
angular.bootstrap(document.documentelement,['app']);
</script>
如对本文有疑问， 点击进行留言回复！！
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
bootstrap-closable-tab可实现关闭的tab标签页插件
我要评论
网友评论