angularjs 指令详解 - template,restrict,replace

【转自：http://www.cnblogs.com/haogj/p/3601528.html】

通过指令机制，angularjs 提供了一个强大的扩展系统，我们可以通过自定义指令来扩展自己的指令系统。

怎样定义自己的指令呢？

我们通过Bootstrap UI来学习吧。这个项目使用 angularjs 将 Bootstrap 3 进行了封装，是我们学习 angularjs 很好的样例。

从 Alert 开始

首先，我们从比较简单的alert 指令来开始学习。

在 Bootstrap 中，警告框使用类 alert 来表示,通过alert-success，alert-info，alert-warning,alert-danger 来表示不同类型的警告。

<divclass="alertalert-success">...</div><divclass="alertalert-info">...</div><divclass="alertalert-warning">...</div><divclass="alertalert-danger">...</div>

对于可关闭的警告框来说，还可以用一个可选的.alert-dismissable和关闭按钮，但是，这是通过脚本来实现的，在 bootstrap ui 这里没有使用。

<divclass="alertalert-warningalert-dismissable">
<buttontype="button"class="close"data-dismiss="alert"aria-hidden="true">&times;</button>
<strong>Warning!</strong>Bestcheckyoself,you'renotlookingtoogood.</div>

bootstrap UI 中的用法

在 Bootstrap UI 的示例中，我们可以直接通过自定义的 alert 来定义一个提示。其中的 type 用来定义提示的类型，提示的信息内容通过绑定来处理。

<divng-controller="AlertDemoCtrl">
<alertng-repeat="alertinalerts"type="alert.type"close="closeAlert($index)">{{alert.msg}}</alert>
<buttonclass='btnbtn-default'ng-click="addAlert()">AddAlert</button></div>

对应的脚本

functionAlertDemoCtrl($scope){
$scope.alerts=[
{type:'danger',msg:'Ohsnap!Changeafewthingsupandtrysubmittingagain.'},{type:'success',msg:'Welldone!Yousuccessfullyreadthisimportantalertmessage.'}
];

$scope.addAlert=function(){
$scope.alerts.push({msg:"Anotheralert!"});
};

$scope.closeAlert=function(index){
$scope.alerts.splice(index,1);
};

}

bootstrap UI 中的定义

下面就是指令的定义了。

angular.module('ui.bootstrap.alert',[])

.controller('AlertController',['$scope','$attrs',function($scope,$attrs){
$scope.closeable='close'in$attrs;
}])

.directive('alert',function(){return{
restrict:'EA',controller:'AlertController',templateUrl:'template/alert/alert.html',transclude:true,replace:true,scope:{
type:'@',close:'&'
}
};
});

最终生成的标记为：

<divng-controller="AlertDemoCtrl"class="ng-scope">
<!--ngRepeat:alertinalerts-->
<divclass="alertng-isolate-scopealert-danger"ng-class="&quot;alert-&quot;+(type||&quot;warning&quot;)"ng-repeat="alertinalerts"type="alert.type"close="closeAlert($index)">
<buttonng-show="closeable"type="button"class="close"ng-click="close()">×</button>
<divng-transclude=""><spanclass="ng-scopeng-binding">Ohsnap!Changeafewthingsupandtrysubmittingagain.</span></div>
</div>

<!--endngRepeat:alertinalerts-->
<divclass="alertng-isolate-scopealert-success"ng-class="&quot;alert-&quot;+(type||&quot;warning&quot;)"ng-repeat="alertinalerts"type="alert.type"close="closeAlert($index)">
<buttonng-show="closeable"type="button"class="close"ng-click="close()">×</button>
<divng-transclude=""><spanclass="ng-scopeng-binding">Welldone!Yousuccessfullyreadthisimportantalertmessage.</span></div>
</div><!--endngRepeat:alertinalerts-->
<buttonclass="btnbtn-default"ng-click="addAlert()">AddAlert</button></div>

看不懂！没有关系，我们慢慢来。

从模版开始

比如说，在下面的代码中，你希望通过 my-customer 将一个内容为空白的 div 变成内容为绑定名字和地址的文本内容

<divng-controller="Ctrl">
<divmy-customer></div></div>

比如生成下面的结果：

<divng-controller="Ctrl">
<div>Name:{{customer.name}}Address:{{customer.address}}</div></div>

内嵌模版

对于以上的要求，我们可以定义一个名为 my-customer 的指令。然后，说明这个指令将会生成元素中间的内容，我们称之为模版的内容。

angular.module('docsSimpleDirective',[])
.controller('Ctrl',function($scope){
$scope.customer={
name:'Naomi',address:'1600Amphitheatre'
};
})
.directive('myCustomer',function(){return{
template:'Name:{{customer.name}}Address:{{customer.address}}'
};
});

directive 表示我们要定义一个自定义的指令，指令的名称为 myCustomer，后面的函数用来定义指令的特征

template 表示我们的指令使用的模版，你会看到，它的值就是我们准备生成的内容。

不过，你会说，且慢，我希望使用 myCustomer 元素，而不是 Attribute ，那又该怎么办呢？

默认情况下，指令只能作为元素的 attribute 使用，如果希望用在其它的地方，那么你需要学习第二个属性 restrict

指令的使用范围

restrict 的取值可以有三种：

A 用于元素的 Attribute，这是默认值
E 用于元素的名称
C 用于 CSS 中的 class

比如说，我们这样定义指令。

varapp=angular.module("app",[])
.directive("hello",function(){varoption={
restrict:"AEC",template:"Hello,Directive",};returnoption;
})

由于我们指定了可以用于三种情况下，那么，就可以如下三种形式来使用这个指令

<!--元素--><div>
<hello></hello></div><!--属性--><div>
<divhello></div></div><!--class--><div>
<divclass="hello"></div></div>

输出的结果分别如下：

<!--元素--><div>
<hello>Hello,Directive</hello></div><!--属性--><div>
<divhello="">Hello,Directive</div></div><!--class--><div>
<divclass="hello">Hello,Directive</div></div>

替换元素

下一个你需要知道的参数为 replace，顾名思义，这是替换的意思，默认为 false，就是将模版的内容追加到元素中，如果设置为 true，那么模版的内容将会替换元素的内容。

原来的输出将会成为下面的样子，实际上，你在页面中将会看不到输出的内容，hello 元素浏览器是不认识的，而其它两种方式，我们又没有生成任何的元素。

<!--元素--><div>
<hello></hello></div><!--属性--><div>
<divhello=""></div></div><!--class--><div>
<divclass="hello"></div></div>

如果我们将模版更新为一个元素，如下所示。

代码" style="color:rgb(0,function(){varoption={ restrict:"AECM",template:"<h3>Hello,Directive</h3>",replace:true };returnoption; })

这次，你将会看到在 replace 为 true 情况下的元素了。

<!--元素--><div>
<h3>Hello,Directive</h3></div><!--属性--><div>
<h3hello="">Hello,Directive</h3></div><!--class--><div>
<h3class="hello">Hello,Directive</h3></div>

transclusion 嵌入

如果我们在上面的元素中这么写会怎样呢？

<!--元素--><div>
<hello>12345678</hello></div>

你会发现 12345678 消失了，这个元素完全被模版替换了。如果我们需要保留这些内容怎么处理呢？

transclusion 指的是定义模版的元素如何处理问题，比如，在使用指令的时候，指令中包含了内容，那么这些内容我们是否直接被替换为模版，还是将这些内容嵌入到模版中。

在使用它的时候，需要在两个地方说明，一是在指令中说明需要嵌入，二是在模版中说明嵌入到哪里。

代码" style="color:rgb(0,Directive,<spanng-transclude></span></h3>",transclude:true };returnoption; })

然后，在模版中说明嵌入的位置。

template:"<h3>Hello,

页面中的使用。

<hello>12345678</hello>

最后，生成的结果如下。

<h3>Hello,<spanng-transclude=""><spanclass="ng-scope">12345678</span></span></h3>

看看 alert 使用的模版

模版的实际定义如下。

<divclass="alert"ng-class="{'alert-{{type||'warning'}}':true,'alert-dismissable':closeable}"role="alert">
<buttonng-show="closeable"type="button"class="close"ng-click="close()">
<spanaria-hidden="true">&times;</span>
<spanclass="sr-only">Close</span>
</button>
<divng-transclude></div></div>

在生成之后，alert 被替换为了 div 元素，至于关闭按钮是否显示出来，取决于 closeable 属性的值。

replace 定义为真，表示使用模版的定义替换原来的元素，而 transclude 用来把内容填充到目标位置。在内嵌的 div 元素中使用了 ng-transclude 指示了填充的目标位置。

angularjs 指令详解