原文地址

什么是directive？我们先来看一下官方的解释：

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS'sHTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.

像ngBind，ngModel和ngClass等指令都是angular内置的directive，当我们感觉这些directive不能满足我们的要求时，则可以自己动手创建directive。

我们定义的directive一般使用camelCase（驼峰）命名规则，但是由于HTML是不区分大小写的，所以我们的directive在DOM中只能使用小写，可以使用以下几种方式来表示：

例如ngBind可以表示为以下几种方式：

  <span ng-bind="name"></span> <br/>

  <span ng:bind="name"></span> <br/>

  <span ng_bind="name"></span> <br/>

  <span data-ng-bind="name"></span> <br/>

  <span x-ng-bind="name"></span> <br/>

但我们一般常用下划线来表示，如：ng-bing

了解完指令的定义，那么接下来我们学习如何自己创建一个指令。

一.directive的写法以及参数说明：

angular.module("app",[])

 .directive("directive",function(){

    return{

     	restrict:"EACM", //指明指令在DOM中以什么样的形式被声明

		priority:0, //该指令的执行优先级

		terminal:true/false, //是否是最后一组执行的directive。

		template:"<div></div>", //模板

		template:"**/**.html", //指定模板的url

		replace:true/false,  //替换或拼接到当前元素

		transclude:true/false/'element', //将内容编译后放入指定地方

		scope:true/false/{}, //创建一个新的作用域

		require:[],  //请求其他directive的controller

		controller:function/controllerName, //创建一个控制器，可与其他              .                                                    directive共享

		link:function, //操控DOM元素

		compile:function, //通过表示服修改DOM模板

    };

})

二.directive返回参数详解

1.restrict

可选参数，指明指令在DOM里面以什么形式被声明，默认为A(属性)；

E(元素)：<directive></directive>

A(属性)：<div directive='name'></div>

C(类)：   <div class='directive'></div>

M(注释)：<–directive:directive name–>

2.priority

可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行，如果优先级相同，则执行顺序是不确定的。

3.terminal

可选参数，可以被设置为true或false，若设置为true，则表示当前的priority将会成为最后一组执行的directive。任何directive与当前的优先级相同的话，他们依然会执行，但顺序是不确定。优先级低于此指令的其他指令则无效，不会被调用。

4.template

可选参数，html代码，如下所示，

//js代码

angular.module("app",[])

 .directive("hello",function(){

	return{

		restrict:'EA',

		template:"<div>templateUrl</div>"

	};

 })

//html代码

<div>

	<hello></hello>

</div>

则输出结果是：

templateUrl

5.templateUrl

可选参数，与template基本一致，但模版通过指定的url进行加载。因为模版加载是异步的，所以compilation、linking都会暂停，等待加载完毕后再执行。

由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，可以先缓存模板来提高速度（可以使用ng-template或$templateCache来缓存模板，详细用法在这里不多说，请自行查询）

6.replace

可选参数，默认为false。如果设置为true，那么模版将会替换当前元素，否则作为子元素添加到当前元素中。

当设为true时：

//js代码

angular.module("app",[])

 .directive("hello",function(){

	return{

		restrict:'EA',

		replace：true,

		template:"<div>templateUrl</div>"

	};

 })

//html代码

<div>

	<hello></hello>

</div>

那么渲染之后的代码为：

 <div>

	<div>templateUrl</div>

</div>

可以看到，<hello></hello>已经被<div>templateUrl</div>这个标签替换掉了。

还是以上代码，如果设为false或不设值时，渲染之后的代码为：

<div>

	<hello>

		<div>templateUrl</div>

	</hello>

</div> 

可以自己比较一下true和false的区别。

7.transclude

可选参数，默认值为fasle。

指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。那么，如果我们自定义的标签内部出现了子标签，应该如何去处理呢？

transclude可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。我们可以使用ng-transclude来指明了应该在什么地方放置transcluded内容。

看如下代码：

 <!doctype html>

<html ng-app="myApp">

<head>

  <script src="angular.min.js"></script>

</head>

<body>

  <div ng-controller='controller'>

  	<hello>

       {{text}}

    </hello>

	<hello></hello>

  </div>

  <script>

    var app = angular.module('myApp',[]);

    app.controller('controller',function($scope){

      $scope.text = 'I am transclude';

    });

    app.directive('hello',function(){

     return {

        scope:{},

        restrict: 'AE',

        transclude: true,

        template: '<div ng-transclude>hello world</div>'

     }

    });

  </script>

</body>

</html>

上边代码的输出结果是：

I am transclude
hello world

当transclude设为true的时候，会创建一个新的transclude空间，并且继承了父作用域

我们再看看生成的html为下图所示，

可以发现第一个<hello>标签里的文本“hello world”消失了，这是因为被transclude内容替换掉了。这里的transclude内容就是{{text}}

我们将true换为'element'，如下图所示：

转换整个元素，包括其他优先级较低的directive。使用时，忽略其模板属性。

angularjs 指令（directive）详解(1)的更多相关文章

  1. AngularJS指令的详解

    指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.指令是我们用来扩展浏览器能力的技术 ...

  2. angularjs的directive详解

    Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操 ...

  3. AngularJS模块的详解

    AngularJS模块的详解 在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规 ...

  4. ng-repeat指令使用详解

    ng-repeat指令使用详解 link: function(scope,element,attr) scope.$index: if(scope.$last == true){} attr['mng ...

  5. SSI指令使用详解（转）

    什么是 SHTML使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为“服务器端嵌入”或者叫“服务器端包含”,是一种类似 ...

  6. Java中String的intern方法，javap&cfr.jar反编译，javap反编译后二进制指令代码详解，Java8常量池的位置

    一个例子 public class TestString{ public static void main(String[] args){ String a = "a"; Stri ...

  7. IA-32指令解析详解

    IA-32指令解析详解 0x00 前言 这段时间忙于考试,信息论和最优化,还有算法分析,有点让人头大.期间花了几天看SEH机制,能明白个大概,但是对于VC++对于SHE的包装似乎还是不是很明白,发现逆 ...

  8. angularJS directive详解（自定义指令）

    Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...

  9. angularJS directive详解

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angul ...

  10. vue自定义指令VNode详解(转)

    1.自定义指令钩子函数 Vue.directive('my-directive', {bind: function () {// 做绑定的准备工作// 比如添加事件监听器,或是其他只需要执行一次的复杂 ...

随机推荐

  1. BZOJ4195 程序自动分析

    Description 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,…代表程序中出现的变量,给定n个形如xi=xj或x ...

  2. 该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结

    是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...

  3. WPF MVVM模式

    1. MVVM MVVM的设计模式最早于2005年由微软的WPF和Silverlight架构师John Gossman在他的博客中提到. WPF中采用MVVM的架构可以获得以下好处: 1. 将UI和业 ...

  4. 【Derby 系列】Apache Derby 功能特点

    前言 进入Derby 的应用开发之前,浏览一下derby的功能集,这样在真正选择的时候,可以决定Derby是不是适合你的应用. 本篇的是[Derby 系列]初级的第3篇. 1. Derby 是关系型数 ...

  5. jquery源码分析-工具函数

    jQuery的版本一路狂飙啊,现在都到了2.0.X版本了.有空的时候,看看jquery的源码,学习一下别人的编程思路还是不错的. 下面这里是一些jquery的工具函数代码,大家可以看看,实现思路还是很 ...

  6. 繁华模拟赛 Vicent与游戏

    #include<cstdio> #include<iostream> #include<algorithm> #include<cstring> #i ...

  7. 使用python一步一步搭建微信公众平台（一）

    使用的工具,python 新浪SAE平台,微信的公众平台 你需要先在微信的公众平台与新浪SAE平台上各种注册,微信平台注册的时候需要你拍张手持身份证的照片,还有几天的审核期 微信公众平台:http:/ ...

  8. App开发到App Store上架，发布流程。

     http://blog.csdn.net/wojsg001/article/details/12005887 App开发到App Store上架,发布流程. 分类: IOS2013-09-25 11 ...

  9. 如何用rake tasks 生成migration对应的sql

    how-to-use-rake-tasks-to-generate-migration-sql Rakefile文件里有load_tasks的方法 http://api.rubyonrails.org ...

  10. 从零开始写一个武侠冒险游戏-7-用GPU提升性能(2)

    从零开始写一个武侠冒险游戏-7-用GPU提升性能(2) ----把地图处理放在GPU上 作者:FreeBlues 修订记录 2016.06.21 初稿完成. 2016.08.06 增加对 XCode ...