指定一个编译函数
controller
为指令创建一个控制器函数
link
为指令指定链接函数
replace
指定模板内容是否替换指令所应用到的元素
require
声明对某个控制器的依赖
restrict
指定指令如何使用ACEM
scope
为指令创建一个新的作用域或者一个隔离的作用域
template
指定一个将被插入到HTML文档的模板
templateUrl
指定一个将被插入到HTML文档的外部模板
transclude
指定指令是否被用于包含任意内容
.directive('unorderedList', function () { return { link: function (scope, element, attrs) { var data = scope[attrs['unorderedList'] || attrs['listSource'] ]; var propertyName = attrs['listProperty'] || "price || currency"; if(angular.isArray(data)){ var listElem = angular.element("<ul>"); if(element[0].nodeName == "#comment"){ element.parent().append(listElem); }else{ element.append(listElem); } for(var i=0, len=data.length; i<len; i++){ var itemElem = angular.element('<li>').text(scope.$eval(propertyName, data[i])); listElem.append(itemElem); } } }, restrict:'EACM' }; });
如何使用指令
当作元素使用（E）
<unordered-list list-source="products" list-property="price | currency" />
当unordered-list当作元素使用，需要添加另外的属性代替unordered-list属性的作用。
var data = scope[attrs['unorderedList'] || attrs['listSource'] ];
当作属性使用（A）
<div unordered-list="products" list-property="price | currency"></div>
当作类的属性值使用（C）
<div list-property="price | currency"></div>
当作注释使用（M）
<!-- directive: unordered-list products -->
使用模板指令
.directive('unorderedList', function () { return { link: function (scope, element, attrs) { scope.data = scope[attrs['unorderedList']]; }, restrict: 'A', template:"<ul><li ng-repeat='item in data'>{{item.price | currency}}</li></ul>" }; });
使用函数作为模板
template属性除了使用字符串，也可以指定一个函数来生成模板化的内容。该函数传入两个函数（指令所应用到的元素以及属性集合）并返回将被插入到文档中的HTML代码片段。
<script type="text/javascript"> <ul> <li ng-repeat="item in data">{{item.price | currency}}</li> </ul> </script> <script> var myApp = angular.module('myApp', []) .controller('myCtrl', ["$scope", function ($scope) { $scope.products = [ { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 }, { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 }, { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 } ]; }]) .directive('unorderedList', function () { return { link: function (scope, element, attrs) { scope.data = scope[attrs['unorderedList']]; }, restrict: 'A', template:function () { return angular.element( document.querySelector("#listTemplate") ).html(); } }; }); </script>
使用外部模板
itemTemplate.html
<p>This is the form the template file</p> <ul> <li ng-repeat="item in data">{{item.price | currency}}</li> </ul>
.directive('unorderedList', function () { return { link: function (scope, element, attrs) { scope.data = scope[attrs['unorderedList']]; }, restrict: 'A', templateUrl:"itemTemplate.html" }; });
通过函数选择一个外部模版
tableTemplate.html
<table> <thead> <tr> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr ng-repeat="item in data"> <td>{{item.name}}</td> <td>{{item.price | currency}}</td> </tr> </tbody> </table>
<div unordered-list="products" template="table"> This is where the list will go </div>