AngularJS自定义指令教程第2部分
在上一篇文章中，我们创建了一个简单的指令来操纵DOM的行为。
在本文中，我们将描述指令属性。
指令属性
之前，我们研究了template和templateUrl属性的用法。
现在我们来看看其他指令属性。
限制：此属性确定可以其中使用指令(作为元素，属性，CSS类或者注释)。
范围：用于创建和隔离范围。
template：定义应从指令输出的内容。
可以包括HTML，数据绑定表达式，甚至其他指令。templateUrl：提供指令应使用的模板的路径。
controller：用于定义与指令模板关联的控制器。
controllerAs：指令范围内的控制器别名。
priority：用于指定在单个DOM元素上定义了多个指令时，指令的应用顺序。
链接：定义用于DOM操作任务的功能。
compile：compile函数用于转换模板DOM。
transclude：提取指令出现的元素的内容，并将其提供给指令。
内容被编译并作为包含函数提供给指令。
您可以查看Angular官方文档以了解更多详细信息。
指令限制
创建指令时，默认情况下仅将其限制为属性和元素。
为了创建由类名触发的指令，您需要使用限制选项。
Angular提供了不同的选项来限制指令的使用。
下一节演示了限制选项的用法。
‘A’–仅当属性名称匹配时才应用此伪指令。
<div my-directive="expression"></div>
" E" –仅当元素名称匹配时才应用此伪指令。
<my-directive></my-directive>
‘C’–仅当类名匹配时才应用此指令。
<div class="my-directive:expression;"></div>
" M" –在注释中使用。
<!-- directive: my-directive expression-->
我们还可以根据需要结合以下限制：
" AEC" –匹配属性，元素或者类名
使用指令属性的语法
以下脚本演示了使用指令属性的语法。
您不必使用所有这些属性来创建指令。
您可以根据需要使用这些指令属性。
var app = angular.module('moduleName', []);
app.directive('directiveName', function () {
return {
restrict: 'EA', //E = element, A = attribute, C = class, M = comment
scope: { },
templateUrl: 'mytemplate.html',
controller: function() { }, //define controller in the directive
link: function () { }
}
});
使用指令属性
以下示例演示了上述属性的用法，以创建名为" myEmployee"的指令。
var app = angular.module('mainApp', []);
app.directive('myEmployee', function() {
return {
restrict: 'EA',
scope:{}, //isolate scope.
link: function(){
alert("Hello, I'm working.");
},
template: "<div>My First Directive.</div>"
};
});
我们可以将myEmployee指令用作属性或者元素。
在上面的示例中，我们使用链接功能来警告消息。
<html> <head> <title>AngularJS Custom Directive Tutorial</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div ng-app="mainApp"> <div my-employee></div> </div> </body> </html>
