angularjs指令怎么写？

摘要：使用过AngularJS的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS拥有自定义指令的功能，并且AngularJS是目前唯一提供Web应用可复用能力的框架。目前有很多JavaScript产品提供插SyntaxHighlighter.all();使用过AngularJS的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS拥有自定义指令的功能，并且AngularJS是目前唯一提供Web应用可复用能力的框架。目前有很多JavaScript产品提供插件给Web开发人员。例如，Bootstrap就是当前比较流行的提供样式和JavaScript插件的前端开发工具包。但是开发人员在使用Booostrap中的插件时，必须切换到JavaScript模式来写jQuery代码来激活插件虽然jQuery代码写起来十分简单，但是必须和HTML进行同步，这是一个单调乏味且容易出错的过程。AngularJS主页展示了一个简单的例子，用于实现Bootstrap中的Tab功能，可以在页面中轻松添加Tab功能，并且使用方法和ul标签一样简单。HTML代码如下：复制代码BootStrapTabComponentThisisthecontentofthefirsttab.Thisisthecontentofthesecondtab.复制代码JavaScript代码如下：复制代码angular.module('components',[]).directive('tabs',function(){return{restrict:'E',transclude:true,scope:{},controller:["$scope",function($scope){varpanes=$scope.panes=[];$scope.select=function(pane){angular.forEach(panes,function(pane){pane.selected=false;});pane.selected=true;}this.addPane=function(pane){if(panes.length==0)$scope.select(pane);panes.push(pane);}}],template:''+''+''+'''+''+''+'',replace:true};}).directive('pane',function(){return{require:'^tabs',restrict:'E',transclude:true,scope:{title:'@'},link:function(scope,element,attrs,tabsCtrl){tabsCtrl.addPane(scope);},template:''+'',replace:true};})复制代码你可以从以下链接查看效果：创建指令模块(或者检索现有模块)varm=angular.module("myApp");//创建"my-dir"指令myApp.directive("myDir",function(){return{restrict:"E",//指令是一个元素(并非属性)scope:{//设置指令对于的scopename:"@",//name值传递（字符串，单向绑定）amount:"=",//amount引用传递（双向绑定）save:"&"//保存操作},template://替换HTML(使用scope中的变量)""+"{{name}}:"+"Save"+"",replace:true,//使用模板替换原始标记transclude:false,//不复制原始HTML内容controller:["$scope",function($scope){…}],link:function(scope,element,attrs,controller){…}}});复制代码效果如下：image注意这个自定义指令遵循一种格式：以"my"为前缀，类似于命名空间，因此如果你在应用中引用了多个模块指令，你可以通过前缀很容易的判断出它是在哪定义的。这不是硬性要求，但是这样做可以带来很多便利。指令的构造函数会返回带有属性的JavaScript对象。这些内容在AngularJS主页中都有清晰说明。以下是我对一些属性的理解：restrict:说明指令在HTML中的应用形式，备选项有"A"、"E"和"C"，"M"，分别代表attribute、element、class和comment（默认值为"A"）。我们将的关注attributes-如何创建UI元素。scope:创建指令的作用范围，scope在指令中作为属性标签传递。Scope是创建可以复用指令的必要条件，每个指令（不论是处于嵌套指令的哪一级）都有其唯一的作用域，它不依赖于父scope。scope对象定义names和types变量。上面的例子即创建了3个scope变量。name:"@"（值传递，单向绑定）："@"符号表示变量是值传递。指令会检索从父级scope中传递而来字符串中的值。指令可以使用该值但无法修改，是最常用的变量。amount:"="（引用,双向绑定）"="符号表示变量是引用传递。指令检索主Scope中的引用取值。值可以是任意类型的，包括复合对象和数组。指令可以更改父级Scope中的值，所以当指令需要修改父级Scope中的值时我们就需要使用这种类型。save:"&"(表达式)“&”符号表示变量是在父级Scope中启作用的表达式。它允许指令实现比修改值更高级的操作。template:替代原始模板中的标记的字符串。替换功能将替换所有旧元素为新值。注意template是如何使用Scope中定义的变量的。这允许你无需写任何额外的代码即可创建macro-style风格指令。replace:说明是否替换原始标记中的值或是追加原始标记中的值。默认值是false，这时原始标记将被保留。transclude:说明自定义指令是否复制原始标记中的内容。例如，之前展示的“tab”指令设置了transclude为true，因为tab元素包含其他HTML元素。"dateInput"指令则需要在初始化时为空，所以需要设置transclude为false。link:该方法在指令中扮演着重要的角色。它负责执行DOM操作和注册事件监听器等。link方法包含以下参数：scope:指令Scope的引用。scope变量在初始化时是不被定义的，link方法会注册监视器监视值变化事件。element:包含指令的DOM元素的引用，link方法一般通过jQuery操作实例（如果没有加载jQuery，还可以使用Angular'sjqLite）。controller:在有嵌套指令的情况下使用。这个参数作用在于把子指令的引用提供给父指令，允许指令之间进行交互，tab指令就是使用该参数较典型的例子：注意，当调用link方法时，通过值传递（"@"）的scope变量将不会被初始化，它们将会在指令的生命周期中另一个时间点进行初始化，如果你需要监听这个事件，可以使用scope.$watch方法。本回答被网友采纳