在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的双向数据绑定使得编辑器与模型之间的数据同步变得简单。我们可以利用`ngModel`指令来实现这一点。当用户在编辑器中修改内容时，`ngModel`会自动更新，同时我们也可以通过`ngModel`将外部的数据绑定到编辑...
首先，我们需要引入一个第三方库，如`ng2-slider`或`angular-slider`，它们提供了与Angular兼容的滑动条组件。这里我们以`darul75-angular-awesome-slider`为例，这个库提供了一个强大的滑动条组件，具有丰富的定制...
4. `ng-model`：这是双向数据绑定的核心，将视图与模型连接起来。例如，`<input type="text" ng-model="username">`，输入框的值会实时更新到`username`变量。 5. `ng-controller`：定义了一个控制器区域，用于组织...
它通过数据绑定和依赖注入等特性，简化了前端开发流程。AngularJS的指令系统允许开发者扩展HTML的功能，使HTML能够更好地表达应用的业务逻辑。 然后，Leaflet是一个流行的开源地图库，它提供了丰富的地图操作功能，...
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML...
"前端项目-angular-mapboxgl-directive.zip" 这个文件标题表明它是一个前端开发项目，其中包含了与AngularJS框架结合使用的Mapbox GL的指令。Mapbox GL是一个交互式地图渲染库，而AngularJS是一个强大的前端...
开发者可能使用HTML5的新特性如离线存储、多媒体元素和Canvas来提升用户体验和视觉效果，同时利用AngularJS的数据绑定和指令系统来实现日历的动态交互和功能扩展。这样的组件在现代Web应用，尤其是那些需要日程管理...
Angular 的双向数据绑定机制维护了页面（View）与数据（Data）的一致性。双向绑定原理包括数据绑定（data=>view）和事件绑定（view=>data）。 AngularJS 与 Angular2 变化检测的区别： 1. 在 AngularJS1 中，脏...
- `controller`: 定义与指令关联的控制器，可以用来共享数据和行为。 - `require`: 指令需要依赖的父级指令，如`'^parentDir'`表示需要父级名为`parentDir`的指令。 - `link`: 提供DOM元素链接的函数，用于处理DOM...
在`scope`中，我们使用`=`来定义`treeData`属性，这意味着它将与父作用域中的同名属性建立双向数据绑定。此外，我们还定义了一个`controller`，其中的`isLeaf`方法检查一个节点是否为叶子节点（即没有子节点），`...
在架构上，Angular的核心是围绕着几个主要概念展开的，包括组件（Component）、模块（Module）、服务（Service）、依赖注入（Dependency Injection）、模板（Template）、指令（Directive）和数据绑定（Data Binding...
它提供了强大的数据绑定和依赖注入机制，使得前端开发更加模块化和可维护。 2. **Angular Directive**：Angular的指令是扩展HTML的一种方式，通过在HTML元素上添加自定义属性，来控制元素的行为或外观。例如，我们...
这个库的主要目标是为Angular应用提供灵活的数据透视表功能，使得用户能够方便地对大量数据进行汇总、分析和可视化。 在Web开发中，AngularJS是一个流行的前端MVC（模型-视图-控制器）框架，它通过数据绑定和依赖...
本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考，具体如下： AngularJS中模板的使用，事件绑定以及指令与指令之间的交互 <!doctype html> <...
3. **数据绑定(Data Binding)**：Angular的数据绑定允许我们把应用的模型与视图直接关联起来，确保数据的实时更新。双向数据绑定是Angular的一个特色，它让模型和视图保持同步，无需手动操作DOM。 4. **依赖注入...
1. **Angular架构**：介绍Angular的基本组件，包括模块（Module）、组件（Component）、服务（Service）、指令（Directive）和管道（Pipe）。此外，还会讲解依赖注入（Dependency Injection）系统，这是Angular的...
而在构建复杂交互的Web应用时，常常需要实现省市区三级联动的效果，即用户在选择省份后，市和区的选项会自动更新为与所选省份相关的数据。这个过程涉及到数据的动态加载、事件监听以及UI的实时更新等技术。本文将...
Angular.js 的核心特性包括数据绑定、依赖注入、指令系统和模块化，这些都是它在Web开发领域广受欢迎的原因。 **2 向数据绑定** 2向数据绑定是 Angular.js 最显著的特点之一，它简化了应用中视图和模型之间的同步...
它以其MVC（模型-视图-控制器）架构模式而闻名，极大地简化了前端开发过程，尤其是在处理数据绑定和依赖注入方面。这个"Angular JS学习视频教程"显然是为了帮助开发者深入理解和掌握这个强大的框架。 首先，...