Paste_Image.png
下面来看一个非常简单的指令：
var myModule = angular.module('MyModule', []);
myModule.directive('hello' , function(){
return {
restrict : 'AEMC',
template : '<div>hello angularJS!</div>',
replace : true //这里说明如果这个指令里面写别的东西，会被指令覆盖掉
}
})
一般，比较少的指令，我们直接使用template是可以的，但是当需要用到很多HTML代码的时候，很显示，需要拼接很多的字符串，虽然ES6拼接字符串比较好用，但是看上去还是很不优雅，所以，angularJS提供了templateUrl这样一个配置项，比如上面的可以写为：
templateUrl : 'hello-angular-js.html' //我们可以在这个html文件内编写大量的html代码
还有一个要点，当我们编写的模板不止希望在hello这个指令中使用，还希望在别的指令中使用，angularJS还提供给我们另外一种方法：
var myModule = angular.module('MyModule',[]);
//注射器加载完所有模块时，此方法执行一次
myModule.run(function( $templateCache){
$templateCache.put ( 'hello.html' , '<div>Hello everyone!!!!!!</div>')
});
myModule.directive('hello',function($templateCache){
return {
restrict : 'AECM',
template : $templateCache.get('hello.html'),
replace : true
}
})
replace 与 transclude
Paste_Image.png
了解一下慕课网-大漠前辈对原理的分析：
Paste_Image.png
可以看出，一般情况下，操作DOM结构需要在指令中的link函数中写代码：
link函数接收四个参数：scope,element,attr,
Paste_Image.png
Paste_Image.png
