AngularJS动态菜单操作指令

　　

,,,

　　

,,,在我们创建一个angularJS应用的时候,菜单往往往是不可或缺的元素之一。也许在我们静态菜单的时候不会发现在指令中操作菜单收缩,折叠展开没有任何问题,因为我们在操作之前,页面元素渲染已经完成,所以在指令里面通过元素查找目标元素可以成功。但是一旦我们的菜单的数据不是静态而是通过后台接口加载动态数据渲染,我们会发现本来在静态写好的指令操作,在转变为动态数据加载之后,怎么也没法查找到想要的目标元素。

　　

,,,遇到如此问题,开始觉得好奇葩的,当然这也是吐槽一下,还是得好好解决问题的,痛定失痛,决心好好理清思路,分析一下问题原因。首先我们先了解一下AngularJS的生命周期。

　　

　　

,,,在AngularJS应用启动前,它们会以HTML文本的形式保存在文本编辑器中。应用启动后会进行编译和链接,作用域会同HTML进行绑定,应用可以对用户在HTML中进行的操作进行实时响应.AngularJS的生命周期主要有两个主要阶段:一个是编译阶段,一个是链接阶段。

　　

　　

,,,在编译阶段,AngularJS会遍历整个HTML文档并根据JavaScript中的指令定义来处理页面上声明的指令。每一个指令模板中可能有另一个指令,另一个指令也有可能会有自己的模板.AngularJS调用HTML文档根部的指令时,会遍历其中所有的模板,模板中可能含有模板的指令。如果一个元素已经有一个含有模板的指令,永远不要对其用另一个指令进行修饰,只有最高优先级的指令中的模板会被编译。

　　

,,,一旦对指令和其中的子模板进行遍历或编译,编译后的模板会返回一个叫做模板函数的函数。在这个时候的DOM树还没有进行数据绑定,此时对DOM树操作只会有很少的性能开销,ng-repeat和ng-transclude等内置指令会在这个时候对还未进行数据绑定的DOM进行操作,比如ng-repeat,它会遍历指定的数组或对象,在数据绑定之前构建对应的DOM结构,然后将新的DOM(编译后的DOM)传递给指令生命周期中的下一阶段,链接阶段。一个指令的DOM一旦编译完成,就可以立即通过编译函数对其进行访问,编译函数的签名包含有访问指令声明所在的元素(tElements)及该元素对其他属性(tAttrs)的方法。

　　

,,,编译返回对象或函数、编译()函数负责对模板DOM进行转换,链接()函数负责将作用域和DOM进行转换。

　　 　　//? 　　编译:函数(电视、tAttrs transcludeFn) { 　　var tplEl=angular.element (“& lt; div>”+“& lt; h3> & lt;/h3>”+“& lt;/div>”); 　　var h3=tplEl.find (h3); 　　h3.attr(“类型”,tAttrs.type); 　　h3.attr (ng-model, tAttrs.ngModel); 　　h3.val('你好'); 　　tEle.replaceWith (tplEl); 　　返回函数(范围、避署attrs) {//连接函数 　　}; 　　}//?/pre> 　　 　　

　　

,,,联系函数创建可以操作DOM的指令,链接函数是可选的。定义了编译函数,返回链接函数,当两个函数都定义了,编译函数会重载链接函数。

　　 　　//下面2种定义指令的放松在功能上是完全一样的 　　angular.module (“myApp”, []) 　　.directive (myDirective,函数(){ 　　返回{ 　　前:函数(tElement tAttrs transclude) {//在子元素被链接之前执行,之后调用“链接”函数无法定位链接的元素 　　 　　}， 　　职位:函数(范围、iElement iAttrs、控制器){//在子元素被链接之后执行 　　} 　　} 　　}); 　　之前 　　 　　 　　 　　angular.module (“myApp”, []) 　　.directive (myDirective,函数(){ 　　返回{ 　　链接:函数(范围、避署attrs) { 　　返回{ 　　前:函数(tElement tAttrs transclude) {//在子元素被链接之前执行,之后调用“链接”函数无法定位链接的元素 　　}， 　　职位:函数(范围、iElement iAttrs、控制器){//在子元素被链接之后执行 　　} 　　} 　　} 　　} 　　}); 　　 　　

,,,当定义了编译函数来取代链接函数时,链接函数使我们能提供给返回对象的第二个方法,也就是postLink函数。链接函数会在模板编译并同作用域进行链接后被调用,它负责设置事件监听器,监听数据变化和实时的操作DOM。

　　 　　//链接函数签名 　　链接:函数(范围、元素attrs) {//操作DOM 　　}//含需要选项,需要someContainer 　　链接:函数(范围、元素、attrs someContainer) {//在这里操作DOM,可以访问需要指定的控制器 　　}