Angular JS学习笔记（指令）

Angular JS 指令的学习

指令
指令就是附加到html元素的一些自定义标记
编译器
编译器是Angular提供的一项服务，遍历DOM节点，查找特定的属性。
编译过程分为两步：
1.编译：遍历节点，收集所有指令，返回一个连接函数。link func
2.连接：将每个节点和其所在的作用域连接，双向绑定

指令
指令其实就是编译器遍历DOM节点时碰到的执行函数

我们现在创建一个dialog指令并使用它

首先我们写出指令模板

<div ng-show="visible">
  <h3></h3>
  <div class="body" ng-transclude></div>
  <div class="footer">
    <button ng-click="onOk()">Save changes</button>
    <button ng-click="onCancel()">Close</button>
  </div>
</div>

ng-transclude 代表主体，指令中包裹的代码段会放到指令模版中transclude中
在页面使用它：

<div>
  <button ng-click="show=true">show</button>
 
  <dialog title="Hello ."
          visible="show"
          on-cancel="show = false"
          on-ok="show = false; doSomething()">
     Body goes here:  is .
  </dialog>
</div>

那么我们怎样在指令模板中使用这些外部数据呢？
需要建立映射，映射的双方是本地scope和指令中的属性。

transclude: true,
scope: {
    title: '@',             // the title uses the data-binding from the parent scope
    onOk: '&',              // create a delegate onOk function
    onCancel: '&',          // create a delegate onCancel function
    visible: '='            // set up visible to accept data-binding
},
restrict: 'E',
replace: true

priority 数字，代表优先级，同一元素中指令执行的优先级

restrict可以设置成以下方式：

‘A’ - 仅匹配属性名
‘E’ - 仅匹配元素名
‘AE’ - 既匹配属性名又匹配元素名

scope 参数的作用是：隔离指令与所在控制器(父级作用域的控制器)间的作用域，隔离指令与指令之间的作用域。
scope的值是可选的，可选值分别为：false，true，object，默认情况下为false；
·false 共享父作用域
·true 继承父作用域，并且新建独立作用域
·{ } 不继承父作用域，创建新的独立作用域

当指令设置新的独立作用域时，我们还想设置一些属性以便于指令中可以使用
有三种方式提供给我们：

1. @ 局部scope属性，父scope中数据变化会同步到指令中，而指令中变化不会改变父作用域中的数据
2. = 父子作用域属性双向绑定
3. & 可以是表达式，或者一个函数，controller中的函数可以在指令模版中设置调用方式

terminal ：bool类型，如果设置为true，优先级低于该指令就不会执行

template 可以设置为两种形式
1.html代码
2.函数 两个参数
template: function(tElement,tAttrs){
var _html = ‘’;
_html += ‘

’ +‘hello ‘+tAttrs.title+’

’;
return _html;
}
我们可以在指令调用时像使用属性一样设置title
replace
为true的时候会替换指令，最后渲染的html没有指令元素