angularjs directive属性解析

1. 代码样例

   angular.module('docsTransclusionExample', [])
   .controller('Controller', ['$scope', function($scope) {
     $scope.name = 'Tobias';
   }])
   .directive('myDialog', function() {
     return {
       restrict: 'E',
       transclude: true,
       scope: {},
       templateUrl: 'my-dialog.html',
       link: function (scope, element) {
         scope.name = 'Jeff';
       }
     };
   });

2. restrict

   • E： 表示该directive仅能以element方式使用，即：
   • A： 表示该directive仅能以attribute方式使用，即：
   • EA: 表示该directive既能以element方式使用，也能以attribute方式使用

3. transclude
   你的directive可能接受页面上的其他html内容时才会用到，建议你先去掉该参数。有些高阶了。

4. scope
   当你写上该属性时，就表示这个directive不会从它的controller里继承$scope对象，而是会重新创建一个。
5. templateUrl
   你的directive里的html内容

6. link:function(scope,element,attr,ctrl,linker)
   可以简单理解为，当directive被angular 编译后，执行该方法

   • scope:指令所在的作用域
   • element：指令元素的封装，可以调用angular封装的简装jq方法和属性

   • attr：指令元素的属性的集合，例如：你在页面上如果这样写了directive:
     <my-dialog type="modal" animation="fade"></my-dialog>
     那attrs就是：

     {
     type: 'modal',
     animation: 'fade'
     }

   • ctrl：用于调用其他指令的方法,指令之间的互相通信使用，需要配合require
   • linker:用于transClude里面嵌入的内容

参考链接

1. https://segmentfault.com/q/1010000002400734
2. http://blog.csdn.net/qq_30100043/article/details/53181673