angularjs中的指令实践开发指南(一)_angularjs

《angularjs中的指令实践开发指南(一)_angularjs》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、AngularJS中的指令实践开发指南(一)指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令，以及介绍如何在实际项目中使用。在这篇文章的最后(第二部分),我会指导你如何使用Angular指令来创建一个简单的记事本应用。概述一个指令用来引入新的HTML语法。指令是DOM元素上的标记，使元素拥有特定的行为。举例来说，静态的HTML不知道如何来创建和展现一个日期选择器控件。让HTML能识别这个语法

2、，我们需要使用指令。指令通过某种方法來创建一个能够支持口期选择的元素。我们会循序渐进地介绍这是如何实现的。如杲你写过AngularJS的应用，那么你一定已经使用过指令，不管你冇没冇意识到。你肯定已经用过简单的指令，比如ng-mode,ng-repeat,ng-show等。这些指令都赋TzDOM7G素特定的行为。例如，ng-repeat重复特定的元素，ng-show有条件地显示一个元索。如果你想让一个元索支持拖拽,你也需要创建一个指令來实现它。指令背后基木的想法很简单。它通过对元素绑定事件监听或者改变DOM而使HTML拥冇真实

3、的交互性。jQuery视角想象一下使用jQuery如何创建一个日期选择器。首先，我们在HTML屮添加一个普通的输入框，然后通过jQuery调用$(element).dataPicker()來将它转变成一个日期选择器。但是，仔细想一卜当一个设计人员过來检杳HTML标记的时候，他/她能否立刻猜到这个字段实际上表示的内容？这只是一个简单的输入框,或者一个日期选择器？你需要查看JQuery代码来确定这些。而Angular的方法是使用一个指令来扩展HTML。所以，一个日期选择器的指令可以是下面的形式:〈inputtype二"text

4、"/>或者是这样：这种创建UI组建的方式更加直接和清晰。你可以轻易地通过杳看元素就明口这到底是什么。创建口定义指令:一个Angular指令可以冇以下的四种表现形式：1.一个新的HTML元素()2.元素的属性()3.CSSclass()4.注释()当然

5、，我们可以控制我们的指令在HTML中的表现形式。下面我们來看一下AngularJS中的一个典型的指令的写法。指令注册的方式与controller一样，但是它返回的是一个拥冇指令配置屈性的简单对象(指令定义对象)。下而的代码是一个简单的HelloWorld指令。varapp=angular・module('myapp',[]);app・directivc('hclloWorld，,function(){return{restriet:'AE',replace:'true',template:J

IlelloWorld!!

6、