除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用.directive函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令，runoobDirective, 但在使用它时需要以-分割,runoob-directive:
eg:
<body ng-app = "myapp">
<my-directive></my-directive>
<script>
let app = angular.module("myapp",[]);
app.directive("myDirective",function(){
return {
template:"<h3>自定义指令</h3>"
}
});
</script>
当然，除了通过元素名的方式来调用指令，还可以通过以下方式来调用：
eg：
1.元素名：<my-directive></my-directive>
2.属性：<div my-directive></div>
3.类名：<div class="my-directive"></div>
4.注释：<!-- directive: my-directive -->
你也可以限制你的指令只能通过特定的方式来调用，通过添加restrict属性，并设置只值为“A”，来设置指令只能通过属性的方式来调用：
eg：
let app = angular.module("myApp", []);
app.directive("myDirective",function() {
return{
restrict :"A",
template :"自定义指令"
};
});
1.restrict值可以是以下几种：
E：作为元素名使用
C：作为类名使用
M：作为注释使用
A：作为属性使用
2.template和templateUrl
同一个指令中只能template和templateUrl只能选其一。
template为模板内容。即你要在指令所在的容器中插入的html代码。
template属性接收一个字符串，类似这样：
template: '我是指令生成的内容';
templateUrl为从指定地址获取模板内容。即你要在指令所在的容器中插入的一个.html文件。
有了templateUrl我们就可以将想实现的内容写成一个单独的html模版，在需要的地方插入，使用起来会很舒服。
这里的templateUrl类似于JSP中的include，angular也有一个ng-include指令。
3.replace和transclude
replace：是否用模板替换当前元素。true：将指令标签替换成temple中定义的内容，页面上不会再有标签；false：则append（追加）在当前元素上，即模板的内容包在标签内部。默认false。
transculde：是否使用ng-transculde来包含html中指令包含的所有内容，接受两个参数true/false。
eg: replace
js:
let app = angular.module("app",[]);
app.directive("hello",function() {
let option ={
restrict:"AECM",
template:"hello ， directive",
replace:true //这里replace为true，所以原来的内容会被template代替
};
return option;
});
html:
<body>
<hello>我是原来的内容</hello>
===>变成<h3>hello, directive</h3>
如果replace为false ===>
<hello><h3>hello,directive</h3></hello>
</body>
eg: transclude
js:
let app = angular.module("app", []);
app.directive("hello",function() {
let option ={
restrict:"AECM",
template:"hello,directive",
transculde:true//这里transculde为true，所以原来的内容会被放在有ng-transclude属性的标签内
};
return option;
});
html:
<body>
<hello>我是原来的内容</hello>===>
变成<hello><h3>hello,directive</h3><span ng-transclude>我是原来的内容</span></hello>
</body>
4.指令中的scope
directive默认能共享父 scope中定义的属性，例如在模版中直接使用父 scope 中的对象和属性。通常使用这种直接共享的方式可以实现一些简单的 directive 功能。
但是，当你要创建一个可以重复使用的directive的时候，就不能依赖于父scope了，因为在不同的地方使用directive对应的父scope不一样。
所以你需要一个隔离的scope，我们可以向下面这样来定义我们的scope。
eg:
module1.directive("testDirective", function () {
return {
scope: {
value: '提莫队长正在待命！'
},
template: 'Say:{{value}}'
}
});
这样就很方便的将我们directive的上下文scope给定义出来了，但是，如果我想将父scope中的属性传递给directive的scope怎么办呢？
directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互：
1.@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
2.& 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
3.= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。
以上三种方式都要在directive的attr属性中进行赋值。上面的话理解起来可能会比较困难，简单来说就是：
1.@：只能绑定字符串，所以一些简单的继承父scope的属性使用@
2.=： 需要实现双向数据绑定的时候使用=
3.&： 传递来自父$scope中的函数稍后调用
网友评论