[size=x-large]在Angular中，我们想要实现数据绑定，可以使用ng-model,也就是这样的形式：[/size]
[size=x-large]这样，在input中输入内容的时候，内容就会同步的在<h1>中展现出来。初次接触的时候感觉很神奇，感觉ng-model的背后隐藏了惊艳的魔法。[/size]
[size=x-large]想要实时的展示input的变化后的内容，通过ng-model指令可以简单的实现，若是更复杂一点，根据input中的内容来动态的改变<h1>的属性，我们就可以通过ng-change,ng-class来实现。如下：[/size]
[size=x-large]这样，在往input中输入内容的时候，<h1>的背景颜色会随着input中的字符串的长度的改变而改变。[/size]
[size=x-large]这里简单的介绍一下ng-class的用法：ng-class绑定的是一个hash，属性名是class的名称，属性值是一个布尔值，哪一个属性的属性值是true，就会呈现出对应的class。[/size]
[size=x-large]这里只是使用Angular提供的一些指令来实现一些小小的魔法，我们也可以使用Angular提供的directive()来实现自己的指令，演绎自己的精彩。关于更多Angular指令参看这里
[url]http://docs.angularjs.org/api/ng[/url]
[/size]
[size=x-large]下面来说一下如何通过自己创建的指令更加优雅炫酷的实现上面的变色功能。
不说别的，上代码：[/size]
[size=x-large]代码是不是更紧凑了，html模板是不是更加简洁清晰了 :arrow:
这里简单的介绍一下这个directive是如何实现这个功能的。
可以看到，在自定义的的名为‘changeColor’的指令中，我们的返回值是一个函数，这个函数有三个参数：scope-->绑定了这个指令的作用域; ele-->绑定了这个指令的标签; attrs-->绑定的这个指令的标签的属性组（全部属性的一个hash结构）。
接下来，我们看到了scope.$watch,使用$watch前再来普及一下$watch的知识:
$watch有三个参数，第一个是被监视的对象，第二个是被监视对象变化后回调的函数，此函数有三个参数，依次是newVal, oldVal, scope,也就是被监视对象的变化后的值，变化前的值，所属作用域。$watch的第三个参数是其监视的精密程度，是一个布尔值。
知道了这些，我们在看来看程序，可以看到，$watch监视的是当前标签的changeColor属性，changeColor绑定的是input中的body，因此，一旦input中有内容变化，就会触发$watch中的回调函数，在函数体中可以看到ele.css()方法，Angular封装了jquery中的一些常用的方法，相当与内嵌了一个短小精悍的jquery，叫做jqlite。ele.css()便是jqlite提供的一个改变css的方法。
说到这，是不是有了一种豁然开朗的感觉，更详细的directive的介绍在这里
[url]http://www.ng-newsletter.com/posts/directives.html[/url]
[/size]
<input ng-model='body' />
<h1>{{body}}</h1>
[size=x-large]这样，在input中输入内容的时候，内容就会同步的在<h1>中展现出来。初次接触的时候感觉很神奇，感觉ng-model的背后隐藏了惊艳的魔法。[/size]
[size=x-large]想要实时的展示input的变化后的内容，通过ng-model指令可以简单的实现，若是更复杂一点，根据input中的内容来动态的改变<h1>的属性，我们就可以通过ng-change,ng-class来实现。如下：[/size]
<body ng-app='app' ng-controller='ChangeColorController'>
<input ng-model='body' ng-change='change_color()' />
<h1 ng-class="{'green':flag, 'blue':!flag}">{{body}}</h1>
</body>
var module = angular.module('app',[]);
module.controller('ChangeColorController',function($scope){
$scope.change_color = function(){
$scope.flag = ($scope.body.length % 2 == 0 ? true : false);
}
})
.green{
background:green;
}
.blue{
background:blue;
}
[size=x-large]这样，在往input中输入内容的时候，<h1>的背景颜色会随着input中的字符串的长度的改变而改变。[/size]
[size=x-large]这里简单的介绍一下ng-class的用法：ng-class绑定的是一个hash，属性名是class的名称，属性值是一个布尔值，哪一个属性的属性值是true，就会呈现出对应的class。[/size]
[size=x-large]这里只是使用Angular提供的一些指令来实现一些小小的魔法，我们也可以使用Angular提供的directive()来实现自己的指令，演绎自己的精彩。关于更多Angular指令参看这里
[url]http://docs.angularjs.org/api/ng[/url]
[/size]
[size=x-large]下面来说一下如何通过自己创建的指令更加优雅炫酷的实现上面的变色功能。
不说别的，上代码：[/size]
<body ng-app='app'>
<input ng-model='body' />
<h1 change-color='body'>{{body}}</h1>
</body>
var module = angular.module('app', []);
module.directive('changeColor', function(){
return function(scope, ele, attrs){
scope.$watch(attrs.changeColor, function(value){
if(value){
ele.css('background', value % 2 == 0 ? 'green' : 'blue');
}
});
}
});
[size=x-large]代码是不是更紧凑了，html模板是不是更加简洁清晰了 :arrow:
这里简单的介绍一下这个directive是如何实现这个功能的。
可以看到，在自定义的的名为‘changeColor’的指令中，我们的返回值是一个函数，这个函数有三个参数：scope-->绑定了这个指令的作用域; ele-->绑定了这个指令的标签; attrs-->绑定的这个指令的标签的属性组（全部属性的一个hash结构）。
接下来，我们看到了scope.$watch,使用$watch前再来普及一下$watch的知识:
$watch有三个参数，第一个是被监视的对象，第二个是被监视对象变化后回调的函数，此函数有三个参数，依次是newVal, oldVal, scope,也就是被监视对象的变化后的值，变化前的值，所属作用域。$watch的第三个参数是其监视的精密程度，是一个布尔值。
知道了这些，我们在看来看程序，可以看到，$watch监视的是当前标签的changeColor属性，changeColor绑定的是input中的body，因此，一旦input中有内容变化，就会触发$watch中的回调函数，在函数体中可以看到ele.css()方法，Angular封装了jquery中的一些常用的方法，相当与内嵌了一个短小精悍的jquery，叫做jqlite。ele.css()便是jqlite提供的一个改变css的方法。
说到这，是不是有了一种豁然开朗的感觉，更详细的directive的介绍在这里
[url]http://www.ng-newsletter.com/posts/directives.html[/url]
[/size]
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
