在Angular中，我们想要实现数据绑定，可以使用ng-model,也就是这样的形式：
<input ng-model='body' />
<h1>{{body}}</h1>
这样，在input中输入内容的时候，内容就会同步的在<h1>中展现出来。初次接触的时候感觉很神奇，感觉ng-model的背后隐藏了惊艳的魔法。
想要实时的展示input的变化后的内容，通过ng-model指令可以简单的实现，若是更复杂一点，根据input中的内容来动态的改变<h1>的属性，我们就可以通过ng-change,ng-class来实现。如下：
<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;
}
这样，在往input中输入内容的时候，<h1>的背景颜色会随着input中的字符串的长度的改变而改变。
这里简单的介绍一下ng-class的用法：ng-class绑定的是一个hash，属性名是class的名称，属性值是一个布尔值，哪一个属性的属性值是true，就会呈现出对应的class。
这里只是使用Angular提供的一些指令来实现一些小小的魔法，我们也可以使用Angular提供的directive()来实现自己的指令，演绎自己的精彩。关于更多Angular指令参看这里
http://docs.angularjs.org/api/ng
下面来说一下如何通过自己创建的指令更加优雅炫酷的实现上面的变色功能。
不说别的，上代码：
<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');
}
});
}
});
代码是不是更紧凑了，html模板是不是更加简洁清晰了
这里简单的介绍一下这个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的介绍在这里
http://www.ng-newsletter.com/posts/directives.html
分享到：
相关推荐
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML...
不同于jQuery，Angular设计核心思想是通过数据与模板的绑定，摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app=”myApp”>标签...
directive（指令）是angular的一个非常强大又有用的功能，它相当于实现了组件化的概念，我们可以通过它公共地自定义DOM元素或CLASS类或ATTR属性，并且在这基础上进行操作scope、绑定事件等等
本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考，具体如下： AngularJS中模板的使用，事件绑定以及指令与指令之间的交互 <!doctype html> <...
AngularJS可以视为是一种数据优先的框架，在它的三个层面中，数据模型是骨架，视图模型和业务事件是血肉，视图模板和指令是皮毛，这三层合在一起，就形成了一个活生生的Web应用。 1.ng-if的情况下 ，始终将页面中的...
AngularJs（简称ng）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计...通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。
Angular 主要分为八大构造块（也就是八个核心概念）：模块 (module)、组件 (component)、模板 (template)、元数据 (metadata)、数据绑定 (data binding)、指令 (directive)、服务 (service)、依赖注入 (dependency ...
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架，既适合做...AngularJS 最为复杂同时也是最强大的部分就是它的数据绑定机制，这个机制帮助我们能更好的将注意力集中在数据的模型建立和传递上
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件，接下来通过本文给大家介绍AngularJS入门心得之directive和controller通信过程，对angularjs相关知识感兴趣的朋友一起学习吧
#angular-lazyload 关于 基于angular 编写的可复用图片懒加载指令 思路 图片的src不要使用真实地址， 用一个属性保存...git clone https://github.com/angular-directive/angular-lazyload.git 要跑demo环境要求 node ,
本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法。分享给大家供大家参考，具体如下： 1 . 我们知道在jQuery中，动态生成一个元素，...angular.module('myapp',[]) .directive('myText',function(){ retu
Angular 可使用指令无缝地增强标准表单元素的功能，我们将讨论它的优点，包括： ...Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/boot
绑定 form-builder : [form] - 使用表单构建器编辑的 json 表单对象 form-directive : [showForm] - 要呈现的 json 表单对象 field-directive : [field] - 要呈现的 json 字段对象 入门 在你的js中： angular....
自从angular火了以后，各种mvc框架喷涌而出，angular虽然比较火，但是他的坑还是蛮多的，还有许多性能问题被人们吐槽。比如坑爹的脏检查机制，数据binding是受人喜爱的，脏检查就有点…性能低下了。有时候改了一个...
Vue 3自定义指令开发的相关总结 什么是指令（directive） 在Angular和Vue中都有Directive的概念，我们通常讲Directive 翻译为...通过使用v-model，可以获取实现DOM和数据的绑定；使用v-show，可以控制DOM元素显示
包括angular.js 。 它应该位于bower_components/angularjs/ 。 将此组件提供的makequestion.js包含到您的应用程序中。 将esouza.makequestion作为模块依赖项添加到您的应用程序。 在控制器中创建一个对象问题，...
├最新AngularJS开发宝典—第015讲 数据类型判断函数与数据比较方法的使用.mp4 ├最新AngularJS开发宝典—第016讲 ng-init与ng-trim及表单中表单value与$scope数据提交差异分析.mp4 ├最新AngularJS开发宝典—第017...
主要实现原理：点击后，设置一个$interval，每一秒更改一次剩余时间，并依赖Angular数据绑定实时显示在页面中。设置一个$timeout，60秒后将按钮初始化到可用状态。 实现代码： （1）js代码，设置成一个directive以便...