angularJS自定义指令

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