指令指令就是附加到html元素的一些自定义标记编译器编译器是Angular提供的一项服务,遍历DOM节点,查找特定的属性。编译过程分为两步:1.编译:遍历节点,收集所有指令,返回一个连接函数。linkfunc2.连接:将每个节点和其所在的作用域连接,双向绑定
指令指令其实就是编译器遍历DOM节点时碰到的执行函数
我们现在创建一个dialog指令并使用它
首先我们写出指令模板
<divng-show="visible"><h3></h3><divclass="body"ng-transclude></div><divclass="footer"><buttonng-click="onOk()">Savechanges</button><buttonng-click="onCancel()">Close</button></div></div>
ng-transclude代表主体,指令中包裹的代码段会放到指令模版中transclude中在页面使用它:
<div><buttonng-click="show=true">show</button><dialogtitle="Hello."visible="show"on-cancel="show=false"on-ok="show=false;doSomething()">Bodygoeshere:is.</dialog></div>
那么我们怎样在指令模板中使用这些外部数据呢?需要建立映射,映射的双方是本地scope和指令中的属性。
transclude:true,scope:{title:'@',//thetitleusesthedata-bindingfromtheparentscopeonOk:'&',//createadelegateonOkfunctiononCancel:'&',//createadelegateonCancelfunctionvisible:'='//setupvisibletoacceptdata-binding},restrict:'E',replace:true
priority数字,代表优先级,同一元素中指令执行的优先级
restrict可以设置成以下方式:
‘A’-仅匹配属性名‘E’-仅匹配元素名‘AE’-既匹配属性名又匹配元素名
scope参数的作用是:隔离指令与所在控制器(父级作用域的控制器)间的作用域,隔离指令与指令之间的作用域。scope的值是可选的,可选值分别为:false,true,object,默认情况下为false;·false共享父作用域·true继承父作用域,并且新建独立作用域·{}不继承父作用域,创建新的独立作用域
当指令设置新的独立作用域时,我们还想设置一些属性以便于指令中可以使用有三种方式提供给我们:
@局部scope属性,父scope中数据变化会同步到指令中,而指令中变化不会改变父作用域中的数据=父子作用域属性双向绑定&可以是表达式,或者一个函数,controller中的函数可以在指令模版中设置调用方式
terminal:bool类型,如果设置为true,优先级低于该指令就不会执行
template可以设置为两种形式1.html代码2.函数两个参数template:function(tElement,tAttrs){var_html=‘’;_html+=‘
’+‘hello‘+tAttrs.title+’’;return_html;}我们可以在指令调用时像使用属性一样设置titlereplace为true的时候会替换指令,最后渲染的html没有指令元素