AngularJs:Directive指令用法

用.directive函数来添加自定义指令，基本语法如下：

var app=angular.module('myApp',[]);  //申明模块
        app.directive("directiveName",function(){
            return{
                restrict:"EA",       //通过元素和属性调用
                template:"<h1>这是h1标签的内容</h1>"
            }
        })

html里面调用如下：

<div ng-app="myApp">
   <div directive-name></div>
</div>

结果如下：

下面是一个directive的详细属性模板

    var myModule = angular.module(...);  

    myModule.directive('directiveName', function factory(injectables) {  

     var directiveDefinitionObject = {  

     　　priority: 0,  

     　　template: '<div></div>',  

     　　templateUrl: 'directive.html',  

     　　replace: false,  

     　　transclude: false,  

     　　restrict: 'A',  

     　　scope: false,  

     　　compile: function compile(tElement, tAttrs, transclude) {  

     　　　　return {  

     　　　　　　pre: function preLink(scope, iElement, iAttrs, controller) { ... },  

     　　　　　　post: function postLink(scope, iElement, iAttrs, controller) { ... }  

    　　　　}  

    　　},  

     　　link: function postLink(scope, iElement, iAttrs) { ... }  

    };  

     return directiveDefinitionObject;  

    });  

可以看到他有9个属性，下面一介绍：

1.restrict
限制你的指令只能通过特定的方式来调用。
E 作为元素名使用 （element元素）
A 作为属性使用 （attribute属性）
C 作为类名使用 （class类名）
M 作为注释使用
restrict 默认值为 EA,

2.priority
(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；（目前我还不太懂这个属性）

3.terminal
（布尔型），可选参数，可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)

4.template
（字符串或者函数）可选参数，可以是
(1)一段html
例如基本语法案例。
(2)一个函数，可接受两个参数tElement和tAttrs
其中tElement是指使用此指令的元素，
而tAttrs则实例的属性，它是一个由元素上所有的属性组成的集合
其中title就是tattrs上的属性

 var app=angular.module('myApp',[]);//申明模块
  app.directive("directiveName",function(){
     return{
        restrict:"EA",
        template:function(tElement,tAttrs){
             var html='';  
             html=tAttrs.title;
             return html;
         }
      }
  })

html里面这样调用

<div ng-app="myApp">
     <div directive-name title="这是函数的title"></div>
</div>

5.templateUrl （字符串或者函数），可选参数，

（1）一个代表HTML文件路径的字符串
（2）一个函数，可接受两个参数tElement和tAttrs（大致同上）

注意：在本地开发时候，需要运行一个服务器，不然使用templateUrl会报错 Cross Origin Request Script（CORS）错误。
下面的例子为加载跟本index页面同级的hello.html页面，如果直接在本地打开不显示内容，报错

var app=angular.module('myApp',[]);//申明模块
  app.directive("directiveName",function(){
     return{
        restrict:"EA",
        templateUrl:"hello.html"
      }
  })

在模拟的服务器端打开，如下：

由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板
你可以再你的index页面加载好的，将下列代码作为你页面的一部分包含在里面。

<script>
    var app=angular.module('myApp',[]);//申明模块
        app.directive("directiveName",function(){
            return{
                restrict:"EA",
                templateUrl:"hello.html"
            }
        })
</script>

<script type='text/ng-template' id='hello.html'>
    <div><h1>Hi 我是林炳文~~~</h1></div>
</script>
</html>

可能是我的文件太小，看不出什么效果，以后碰到这种问题，可以试一试。

6.replace
（布尔值），默认值为false
replace为true时，hello-world这个标签不在了，反之，则存在。
意思是会在最外面多喝hello-world（自定义指令名）的标签，目前还不懂有什么意义，，日后知道了，再补充笔记

7.scope
（1）默认值false。表示继承父作用域;
（2）true。表示继承父作用域，并创建自己的作用域（子作用域）;
（3）{}。表示创建一个全新的隔离作用域；
ng-controller这个指令也是调用自定义指令

当为false时候，儿子继承父亲的值，改变父亲的值，儿子的值也随之变化，反之亦如此。（继承不隔离）

当为true时候，儿子继承父亲的值，改变父亲的值，儿子的值随之变化，但是改变儿子的值，父亲的值不变。（继承隔离）

当为{}时候，没有继承父亲的值，所以儿子的值为空，改变任何一方的值均不能影响另一方的值。（不继承隔离）

http://blog.csdn.net/h_qingxue/article/details/54911377