https://segmentfault.com/a/1190000009820031
var app = angular.module("app",[]);
//自定义指令和定义控制器相似
app.directive("custom",[依赖，function (依赖) {
return{ //返回指令对象
restrict:"EA",
template:"<h1>这是第一个自定义指令模板<p>p标签元素</p></h1> ",
replace:true,
controller：function($scope){}
link:function(scope,element,attrs,foodCtrl)
}
}])
restrict：是指令的类型，有四种取值：
① E：以元素的方式出现
② A：以属性的方式出现
③ C：以类的方式出现（用的比较少）
④ M：以注释的方式（用的少）
template：是指令模板 指令模板必须要有一个根元素包裹。
replace：顾名思义，这是替换的意思，默认为 false，就是将模版的内容追加到元素中，如果设置为 true，那么模版的内容将会替换元素的内容
指令的属性如下：
- name
- priority
- terminal
- scope
- controller
- require
- restrict
- template
- templateUrl
- replace
- transclude
- compile
- link
template和templateUrl
同一个指令中只能template和templateUrl只能选其一。
template为模板内容。即你要在指令所在的容器中插入的html代码。
template属性接收一个字符串，类似这样：
template: '<div>我是指令生成的内容</div>';
你也可以将整个template写得很复杂，但是，复杂的代码非常不易维护。并且你还得换行，得用字符串拼接每一行。
当你的tamplate超出10行就会显得辣眼睛，过长的template建议使用templateUrl代替。
templateUrl为从指定地址获取模板内容。即你要在指令所在的容器中插入的一个.html文件。
有了templateUrl我们就可以将想实现的内容写成一个单独的html模版，在需要的地方插入，使用起来会很舒服。
这里的templateUrl类似于JSP中的include，angular也有一个ng-include指令。
replace和transclude
replace：是否用模板替换当前元素。true : 将指令标签替换成temple中定义的内容,页面上不会再有<my-directive>标签；false ：则append（追加）在当前元素上，即模板的内容包在<my-directive>标签内部。默认false。
transculde：是否使用ng-transculde来包含html中指令包含的原有的内容，接收两个参数true/false
<html>
<head></head>
<body>
<hello>我是原来的内容</hello> ===> 变成<h3>Hello, Directive</h3>
如果replace为false ===><hello><h3>Hello, Directive</h3></hello>
</body>
</html>
transculde: true //这里transculde为true，所以原来的内容会被放在有ng-transclude属性的标签内 <hello>我是原来的内容</hello> ===> 变成
<hello><h3>Hello, Directive</h3><span ng-transclude>我是原来的内容</span></hello>scope
directive 默认能共享父 scope 中定义的属性，例如在模版中直接使用父 scope 中的对象和属性。通常使用这种直接共享的方式可以实现一些简单的 directive 功能。
但是，当你要创建一个可以重复使用的directive的时候，就不能依赖于父scope了，因为在不同的地方使用directive对应的父scope不一样。
module1.directive("testDirective", function () {
return {
scope: {
value: '提莫队长正在待命！'
},
template: 'Say:{{value}}'
}
});
link
link: function(scope, element, attrs) {
// 在这里操作DOM
}
如果指令使用了require选项，那么链接函数会有第四个参数，代表控制器或者所依赖的指令的控制器。
// require 'SomeController',
link: function(scope, element, attrs, SomeController) {
// 在这里操作DOM，可以访问required指定的控制器
}
scope：即与指令元素相关联的当前作用域，可以用来注册监听器：scope.$watch()
element：即当前指令对应的元素，使用它可以操作该元素及其子元素。例如<span my-directive></span>，这个span就是指令 my-directive所使用的元素。
attrs：由当前元素的属性组成的对象。
2084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
