AngularJS动态菜单操作指令-创新互联

前言 

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

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

AngularJS的生命周期

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

AngularJS生命周期-编译阶段

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

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

   compile返回对象或函数，compile()函数负责对模板DOM进行转换，link()函数负责将作用域和DOM进行转换。

//...
compile: function(tEle,tAttrs,transcludeFn){
 var tplEl = angular.element('
' +'
'+'
');
 var h3 = tplEl.find('h3');
 h3.attr('type',tAttrs.type);
 h3.attr('ng-model',tAttrs.ngModel);
 h3.val('hello');
 tEle.replaceWith(tplEl);
 return function(scope, ele, attrs){
  //连接函数
 };
}
//...

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。