AngularJS动态菜单操作指令

前言

当我们创建一个AngularJS应用，菜单往往是一个不可或缺的重要元素。也许我们在静态菜单中，我们没有发现有与操作菜单的指令折叠收缩和扩张没有错，因为我们已经完成了页面元素的绘制操作之前，所以我们可以通过在指令元素发现目标元素。但一旦我们菜单数据不是静态的，而是动态的加载数据绘制通过后台界面，我们会发现指令操作，是用静态方法不能转变为动态数据加载后找到目标元素。

遇到这样的问题，开始感觉很好，当然，这是Tucao一次，或要解决的问题，痛痛，下决心清理思路，分析产生问题的原因。首先，让我们在AngularJS的生命周期看。

AngularJS的生命周期

在AngularJS启动应用程序时，他们被保存在HTML文本形式的文本编辑器。当应用程序启动时，它会被编译和链接，范围是绑定到HTML和应用能实时响应用户的操作，在HTML中的AngularJS的生活。周期分为两个阶段：一是编译阶段和其他链接阶段。

AngularJS的生命周期-编译阶段

在编译阶段，AngularJS会遍历整个HTML文档和处理指令的页中声明基于Javaｓｃｒｉｐｔ指令定义。有可能在每个指令模板的另一个指令，以及其他可能有自己的模板。当AngularJS呼吁从HTML文档的根的指示，所有的模板是走过，和模板可以在模板的说明。如果元素已与模板的指令，它是不会修改它与另一个指令，仅在最高优先级的指令模板将被编译。

一旦指令及其子模板遍历或编译，编译后的模板将返回一个称为模板的功能。在这个时候，DOM树尚未数据绑定。此时，DOM树操作的性能开销很小。内置的指令如NG重复和NG嵌入将DOM，尚未在这个时候被数据绑定操作。例如，NG的重复会遍历指定的数组或对象，在数据绑定建立相应的DOM结构，然后将新的DOM（编译DOM）的指令周期的下一阶段，链接阶段。一旦指令DOM是编译，可以通过编写函数立即访问。编译函数的签名包含的元素（telements）的访问指令语句和元素的其他属性的方式（tattrs）。

编译返回一个对象或函数，编译（）函数负责转换模板DOM，而链接（）函数负责转换作用域和DOM。
…
编译：功能（电话，tattrs，transcludefn）{
无功tplel = angular.element（++）；
VaR H2 = tplel.find（'h2）；
h2.attr（类型，tattrs。型）；
h2.attr（'ng-model '，tattrs。ngmodel）；
h2.val（你好）；
tele.replacewith（tplel）；
返回功能（范围、元素、属性）{
链接函数
}；
}
…
AngularJS的生命周期环节相

链接函数创建可以操作DOM的指令，而链接函数是可选的。定义了编译器函数，返回了链接函数。当这两个函数都被定义时，编译器函数将重写链接函数。
下面的2个定义在函数中是完全相同的
Angular.module（'myapp，{ }）
。指令（'mydirective，函数（）{（）{
返回{
预：功能（电信、tattrs，嵌入）{
在 / /子元素链接之前执行，然后调用link'function无法定位链接元素

}，
职位：功能（范围、IElement，iattrs，控制器）{
在子元素中，在链接之后执行。
}
}
}）；

Angular.module（'myapp，{ }）
。指令（'mydirective，函数（）{（）{
Return {
链接：功能（范围、元素、属性）{
返回{
预：功能（电信、tattrs，嵌入）{
在 / /子元素链接之前执行，然后调用link'function无法定位链接元素
}，
职位：功能（范围、IElement，iattrs，控制器）{
在子元素中，在链接之后执行。
}
}
}
}
}）；
当编译函数定义替换链接功能，链接功能允许我们还是对象，提供第二方法的postlink功能，链接功能模板后，编译和链接的范围称为。它负责设置事件监听器，监视数据的变化和DOM的实时操作。
链接功能签名
链接：功能（范围、元素、属性）{
DOM
}
/ /需要包含的选项，需要somecontainer
链接：功能（范围、元素、属性、somecontainer）{
这里的操作，可以要求指定的访问控制器。
}
作用域——指令用于在其内部注册侦听器的范围；
元素-参数表示实例元素，它引用使用此指令的元素。
atrrs --代表实例的属性，它是由定义在元素属性的标准清单。它可以在所有指令的链接函数中共享，并以Javaｓｃｒｉｐｔ对象的形式传输。
控制器参数指向由需求选项定义的控制器。没有设置需求选项，控制器的参数是未定义的；
控制器在所有指令之间共享，因此指令可以使用控制器作为通信通道（公共API）。如果设置了多个要求，则此参数是控制器实例的数组，而不是单个控制器。

问题分析

通过了解AngularJS的生命周期，我们可以清楚地理解为什么动态菜单的DOM操作不成功的在链接阶段。由于NG重复，我没有发现DOM树操作的DOM元素，因为当我被打包到一个菜单命令组件时，内部菜单数据是通过NG重复加载的，所以只有此时我才能在NG重复中绑定DOM树的操作。

原创写作方法：

。

。

。

。

。

。

。

指令
Angular.module（' '，{ }（'menubar '），功能（指令）{
返回{
限制：e，
替换：真的，
链接：功能（范围、元素、属性）{
逻辑代码菜单
}
}
}）；
这样，菜单逻辑的代码不会在链接中触发。尼玛，AngularJS的检测机制是没有用的，因为NG重复的原因是DOM操作事件是不是安装在DOM，所以根本无法操作菜单。然而，如果NG的重复内容是静态的，里面的链接功能的操作可以实现。

修改后的写作方法：

。

。

。

。

。

。

。

。

。

指令
Angular.module（' '，{ }（'menubar '），功能（指令）{
返回{
限制：e，
替换：真的，
链接：功能（范围、元素、属性）{
逻辑代码菜单
}
}
}）；
修改后，将动态操作加载的DOM结构指令引入NG重复。此时，逻辑正常执行，DOM结构可以在链接函数中打印。

以上是AngularJS动态菜单操作指令，经Xiaobi介绍，我们希望对你有帮助。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。