angularJS中directive指令笔记

directive用来解决什么问题？

指令，可以简单理解为在DOM元素上运行的函数，指令可以扩展该DOM元素的功能。

我们可以封装公共指令，比如分页指令、自动补全指令等等。

1. 使Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。
2. 抽象一个自定义组件，在其他地方进行重用。

myModule.directive('namespaceDirectiveName', function factory(injectables) {
   var directiveDefinitionObj = {
       restrict: "E", //ele, attr, class, m(comments), 或者任意组合。推荐用A，有比较好的跨浏览器兼容性。
       priority: 1, //number, 设置模板中相对于其他元素指令的执行顺序，默认为0.优先级最低
       template: "string", //内联模板，和url模板二选一。
       templateUrl: "url", //url模板。可预先缓存模板来减少http请求，提高性能。
       replace: true, //bool值，替换或者追加（默认）。
       transclude: true, //默认false 是否保留自定义标签的原始内容，在模板中通过ng-transclude指令，替换/追加内容?
        //是否需要将指令内部的元素（注意不是指令的模板）嵌入到模板。在ng-transclude位置。
       //会导致在控制器中无法正常监听数据模型的变化

       scope:true,
       //bool or {}空对象, 是否创建新作用域。创建隔离作用域，表示新作用域与父作用域隔离，可正常执行不受外部工作环境影响
       //意味指令有了一个自己的$scope对象。 这个对象只能在指令的方法或模板字符串使用。

       controller:function controllerConstructor($scope, $element, $attrs, $transclude) {
            //...为跨指令通信创建一个发布的API
       },
       require: "string", //字符串/数组。需要其他指令服务于这个指令来正确的发挥作用,并会作为link函数的第四个参数
       //前缀：?当前指令无控制器，会将null作为link第四个参数。^在上游指令链中查找控制器。
       // ?^ 组合两个前缀，可选择加载需要的指令并在父指令链中进行查找。不加前缀，又找不到控制器，就会抛出错误。
       link:function postLink(scope, iElement, iAttrs) {
           //...以编程的方式修改生成的DOM元素实例，添加事件监听，数据绑定。执行多次。从模板创建的视图实例获得元素和属性
       },
       compile:function compile(tElement, tAttrs, transclude) {
           //仅在编译阶段执行一次，处理模板自身的转换。在编译阶段，作用域还不存在。
           //为了提升效率，自定义标签的实例中需要修改的公共属性，在compile中处理
           return {
               pre: function preLink(scope, iElement, iAttrs, controller) {
                   //...
               },
               post:function postLink(scope, iElement, iAttrs, controller) {
                   //...
               }
           }
       }
   };
   return directiveDefinitionObj;
});

 IDE推荐webstorm, 因为它是一个继承了angularJS，有非常强大的代码补全功能。比如输入ngdc，

再回车或者tab键，获取以下这段代码，可以节省好多一个字一个字敲代码的时间，超赞有木有...

    directive('', function factory() {
        var directiveDefinitionObject = {
            
            compile
        :
        function compile(tElement, tAttrs, transclude) {
            
            return function (scope, element, attrs) {
            }
        }
    }
        ;
        return directiveDefinitionObject;
    })

 ngm: angular.module('', []);

ngrw:

$routeProvider.when('', {
        templateUrl: '',
        controller: ''
    });

ngro: $routeProvider.otherwise({redirectTo: ''});

ngrwr:

 $routeProvider.when('', {
        templateUrl: '',
        controller: '',
        resolve: {}
    });