今天我完成的事：

学习在angular中如何自定义指令

DOMA:

//angular指令的定义，myDirective ，使用驼峰命名法

angular.module('myApp', [])

.directive('myDirective', function ($timeout, UserDefinedService) {

// 指令操作代码放在这里

});

//angular自定义指令 的使用，使用 “-” 来代替驼峰命名法

<div my-directive></div>

注意：为了避免与未来的HTML标准冲突，给自定义的指令加入前缀来代表自定义的

命名空间。AngularJS本身已经使用了 ng- 前缀，所以可以选择除此以外的名字。

在例子中我们使用 my- 前缀（比如 my-derictive ） 。

指令的生命周期开始于 $compile 方法并

结束于 link 方法

//自定义指令的全部可设置的属性大致如下

指令的选项如下所示，每个键的值说明了可以将这个属性设置为何种类型或者什么样的

函数：

angular.module('myApp', [])

.directive('myDirective', function() {               //指令名称myDirective

return {                //返回一个对象

restrict: String,      //可选字符串参数，可以设置这个指令在DOM中可以何种形式被声明，

            //默认为A（attr(当做标签属性来使用)）<div my-directive></div> 

            // 设置为“E”(ele,(直接当做标签来使用)) <my-directive></my-directive>

            //C（类名）

            //<div class="my-directive:expression;"></div>

            //M（注释）

            //<--directive:my-directive expression-->

            //这些选项可以单独使用，也可以混合在一起使用：

            //angular.module('myDirective', function(){

            //    return {

            //        restrict: 'EA' // 输入元素或属性

            //    };

            //})

priority: Number, //优先级，可忽略，默认为0， ngRepeat的优先级为1000，这样就可以保证在同一元素上，它总是在其他指令之前被调用。

terminal: Boolean,//（布尔型），true或false,如果为false,则这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。优先级相同的指令还是会被执行。 ngIf 的优先级略高于 ngView ，

template: String or Template Function: //（字符串或函数）指令中的一个重要的一个属性，必须被设置其中一种

                    //1，  一段HTML文本；

                    //2，可以接收两个参数的函数，参数为 tElement 和 tAttrs 

                    //在html模板中必须只有一个根html标签,且如果有换行则需要使用“\”

                    //例如template: '\

                    //    <div> <-- single root element -->\

                    //        <a href="http://google.com">Click me</a>\

                    //        <h1>When using two elements, wrap them in a parent element</h1>\

                    //    </div>\

                    //function(tElement, tAttrs) (...},

                    //更好的选择是使用 templateUrl 参数引用外部模板，参考下面的参数

templateUrl: String,        //（字符串或函数）1，外部路径的字符串，2，接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个外部HTML文件路径的字符串

                //模板加载后，AngularJS会将它默认缓存到 $templateCache 服务中。（可以提前加载模块到缓存中，提高加载速度）

replace: Boolean or String,  //（布尔型）默认为false(模板内容会加载到标签内部)，true(模板内容会替换当前标签)

scope: Boolean or Object,  //（布尔型或对象）,默认为false, 设置为true 时，会从父作用域继承并创建一个新的作用域对象。

            // ng-controller 的作用，就是从父级作用域继承并创建一个新的子作用域。

            //如果要创建一个能够从外部原型继承作用域的指令，将 scope 属性设置为 true 

            //设置为一个对象，则能设置 隔离作用域， scope 属性设置为一个空对象 {} 。如果这样做了，指令的模板就无法访问外部作用域了：

            //例如.directive('myDirective', function() {

            //        return {

            //            restrict: 'A',

            //            scope: {},

            //            priority: 100,

            //            template: '<div>Inside myDirective {{ myProperty }}</div>'

            //        };

            //    });

            //在scope对象中，还可以使用“@” “=” “&”,来设置模板中数据的作用域和绑定规则

            //"@"  本地作用域属性：使用当前指令中的数据和DOM属性的值进行绑定

            //“=” 双向绑定：本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。

            //“&” 父级作用域绑定：通过 & 符号可以对父级作用域进行绑定

            //例如

            //scope: {

            //    ngModel: '=', // 将ngModel同指定对象绑定

            //    onSend: '&', // 将引用传递给这个方法

            //    fromName: '@' // 储存与fromName相关联的字符串

            //}

transclude: Boolean,  //默认为false.只有当你希望创建一个可以包含任意内容的指令时， 才使用 transclude: true 。

            //如果指令使用了 transclude 参数，那么在控制器（下面马上会介绍）中就无法正常监听数

            //据模型的变化了。

controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, //（字符串或函数)注册在应用中的控制器的构造函数

            //使用函数创建内联控制器，例如

            //angular.module('myApp',[])

            //    .directive('myDirective', function() {

            //    restrict: 'A',

            //    controller:

            /    function($scope, $element, $attrs, $transclude) {

            //    // 控制器逻辑放在这里

            //    }

            //})

controllerAs: String,   //可以在指令中创建匿名控制器,例如

            //.directive('myDirective', function() {

            //    return {

            //    restrict: 'A',

            //    template: '<h4>{{ myController.msg }}</h4>',

            //    controllerAs: 'myController',

            //    controller: function() {

            //        this.msg = "Hello World"

            //        }

            //    };

            //});    

require: String, //（字符串或数组）字符串代表另外一个指令的名字,如果没有前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器（或

        //具有指定名字的指令）就抛出一个错误。

        //例如

        //如果不使用 ^ 前缀，指令只会在自身的元素上查找控制器。

        //require: 'ngModel'

        // 使用 ?   如果在当前指令中没有找到所需要的控制器，会将 null 作为传给 link 函数的第四个参数

        //require: '?ngModel'

        //使用  ^  如果添加了 ^ 前缀，指令会在上游的指令链中查找 require 参数所指定的控制器。

        //require: '^ngModel'

        // 使用 ^？  将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找。

        //require: '^?ngModel',

link: function(scope, iElement, iAttrs) { ... }, //compile 选项本身并不会被频繁使用，但是 link 函数则会被经常使用。

                        //当我们设置了 link 选项， 实际上是创建了一个 postLink() 链接函数， 以便 compile() 函数可以定义链接函数。

                        //compile 和 link 选项是互斥的。如果同时设置了这两个选项，那么会把 compile

                        //所返回的函数当作链接函数，而 link 选项本身则会被忽略。

                        //通常情况下，如果设置了 compile 函数，说明我们希望在指令和实时数据被放到DOM中之前

                        //进行DOM操作，在这个函数中进行诸如添加和删除节点等DOM操作是安全的。

        //用 link 函数创建可以操作DOM的指令。

        //require 'SomeController',

        //link: function(scope, element, attrs, SomeController) {

            // 在这里操作DOM，可以访问required指定的控制器

        //}

compile: function(tElement, tAttrs, transclude) {  

        return {

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

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

        }

        // 或者

        return function postLink(...) { ... }

    }

};

});

 明天计划的的事：

继续任务8-9

遇到的问题

研究了一天自定义指令，还是只了解了个大概

收获：

对自定义指令有所了解。