angualar入门学习-- 自定义指令认识属性

个AngularJS指令在HTML代码中可以有四种表现形式：

1、作为一个新的HTML元素来使用

2、作为一个元素的属性来使用

3、作为一个元素的类来使用

4、作为注释来使用

一。创建指令

angular.directive("directiveName", directiveFactory);

第一个参数是指令名，第二个参数指令配置函数

配置函数里的属性有：

angular.module('app', [])
.directive('myDirective', function() {
    return {
    restrict: String,                
    priority: Number,
    terminal: Boolean,
    template: String or Template Function:
    function(tElement, tAttrs) {...},
    templateUrl: String,
    replace: Boolean or String,
    scope: Boolean or Object,
    transclude: Boolean,
    controller: String or   function(scope, element, attrs, transclude, otherInjectables) { ... },
    controllerAs: String,
    require: String,
    link: function(scope, iElement, iAttrs) { ... },
    compile: // 返回一个对象或连接函数，如下所示：
       function(tElement, tAttrs, transclude) {
        return {
            pre: function(scope, iElement, iAttrs, controller) { ... },
            post: function(scope, iElement, iAttrs, controller) { ... }
           }
        return function postLink(...) { ... }
        }
     };
 });

1 restrict[string]：规定指令在HTML中的表现形式。A代表属性、E代表元素、C代表类、M代表注释。

2 template[string or function]

templateUrl：用它来指向一个外部的文件地址，所以我们通常把模板放在外部的一个HTML文件中，然后使用templateUrl来指向他

3 link[function]属性：函数，它包括三个参数：scope、element、attrs。link函数主要是用来添加对DOM元素的事件监听、监视模型属性变化、以及更新DOM的。

4 scope[boolean or object]：该属性是用来定义指令的scope的范围，默认情况下是false，也就是说该指令继承了父controller的scope，可以随意的使用父controller的scope里的属性，但是这样的话就会污染到父scope里的属性。所以我们可以让scope取以下两个值：true和（对象）{}。

当为true的时候，表示让Angular给指令创建一个继承于父scope的scope。

-----------------

scope属性：

取值为false：指令不创建新作用域，继承父controller的scope

取值为true：指令创建新作用域，不继承了父controller的scope

取值为对象时--孤立作用域

　　孤立作用域：虽然指令是个孤立的个体，但很多时候需从父作用域获取信息，scope对象属性，相当于指令对外接口，将孤立作用域的属性与外部作用域属性值绑定。

@ 或 @attr 将孤立作用域成员与父作用域属性单向绑定

= 或 =attr 将孤立作用域成员与父作用域属性双向绑定

& 或 &attr 将孤立作用域成员与父作用域方法双向绑定

<div id="comp">
    <div my-greeting="{{directContent}}"></div>
</div>

创建一个属性形式myGreeting指令（html不区分大小写，以横线形式书写；而ng中，驼峰式）

scope :{
    mydirect : @,
    directContent : "@mydirect"

}

scope取值为非空对象，则创建一个孤立作用域，@表示与 父作用域属性单向绑定
------------

controller属性：String or function(scope, element, attrs, transclude, otherInjectables) { ... }

  当前指令所依赖的其他指令的控制器实例，用于多个嵌套指令之间 的相互通信。需与指令配置对象的require属性一同使用
-----------------------
当指令需要给外部暴露一些方法或数据时，用controller
但对指令内部进行操作时 用link
-----------------------

 compile属性


compile：function(tElement, tAttrs, transclude)

用于处理需要修改模板DOM的。
设置了complie后，指令配置对象中的link属性会被忽略掉，不再执行（这与指令编译执行过程有关），
而是执行compile属性函数返回的link函数。
注 ： compile里不要执行任何DOM变形之外的操作（性能 安全问题）

 tElement ：指令所在的元素DOM；

 tAttrs： 这个元素上的所有属性

----------------------------
link属性
link一般用来操作DOM、绑定事件监听

angualar入门学习-- 自定义指令 认识属性

angualar入门学习-- 自定义指令认识属性