AngularJS动态菜单操作指令


Posted in Javascript onApril 25, 2017

前言    

    在我们创建一个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('<div>' +'<h2></h2>'+'</div>');
 var h2 = tplEl.find('h2');
 h2.attr('type',tAttrs.type);
 h2.attr('ng-model',tAttrs.ngModel);
 h2.val('hello');
 tEle.replaceWith(tplEl);
 return function(scope, ele, attrs){
  //连接函数
 };
}
//...

 AngularJS生命周期-链接阶段

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

//下面2种定义指令的放松在功能上是完全一样的
angular.module('myApp',[])
.directive('myDirective', function (){
 return {
 pre: function (tElement, tAttrs, transclude){
 //在子元素被链接之前执行,之后调用‘link'函数无法定位链接的元素
 
 },
 post: function (scope, iElement, iAttrs, controllers){
   //在子元素被链接之后执行
 }
 }
});
angular.module('myApp',[])
.directive('myDirective', function (){
 return {
 link: function (scope, ele, attrs){
  return {
  pre: function (tElement, tAttrs, transclude){
  //在子元素被链接之前执行,之后调用‘link'函数无法定位链接的元素
  },
  post: function (scope, iElement, iAttrs, controllers){
    //在子元素被链接之后执行
  }
  }
 }
 }
});

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

//链接函数签名
link: function(scope, element, attrs){
 //操作DOM
}
//含require选项, require someContainer
link: function(scope, element, attrs, someContainer){
 //在这里操作DOM,可以访问require指定的控制器
}
  • scope--指令用来在其内部注册监听器的作用域;
  • element--参数代表实例元素,指使用此指令的元素;
  • atrrs--代表实例属性,是一个由定义在元素上的属性组成的标准化列表,可以在所有指令的链接函数间共享,会以javascript对象的形式进行传递;
  • controller 参数指向require选项定义的控制器。没有设置require选项,controller的参数为undefined;

    控制器在所有的指令间共享,因此指令可以将控制器当作通信通道(公共API),如果设置多个require,这个参数是一个控制器实例组成的数组,而不是一个单独的控制器。

问题剖析

    在通过对AngularJS生命周期的理解,我们可以清晰地认识到动态菜单为什么绑定在链接阶段上的DOM操作没有成功,由于ng-repeat的原因,我对DOM树操作没找到DOM元素。因为在封装成一个菜单指令组件的时候,我内部的菜单数据加载使用ng-repeat实现,所以只有在这个时候才能在ng-repeat内部绑定对DOM树的操作。

    最初的写法:

//html 
<menu-bar>
`````
<div ng-repeat="ml in menuLists">
 ``````
 <div ng-repeat="mls in ml.secondLists">
 ``````
 <div ng-repeat="mlt in mls.thirdLists">
 ``````
 </div>
 ``````
 </div>
 ``````
</div>
``````
</menu-bar>
//directive
angular.module('',[]).directive('menuBar',function (){
 return {
 restrict: 'E',
 replace: true,
 link: function (scope, element, attr){
 //操作菜单的逻辑代码
 }
 }
});

    这种写法,在link里面操作菜单逻辑的代码没有被触发,尼玛,angularjs的检测机制也没用,因为ng-repeat的原因导致DOM操作事件没有被挂载到DOM上,所以想操作菜单不可能成功。但是,如果ng-repeat的内容是静态存在的,link函数里面的操作是可以实现的。

    修改后的写法:

//html 
<div ng-repeat="ml in menuLists">
 ``````
 <div ng-repeat="mls in ml.secondLists">
 ``````
 <menu-bar>
 ``````
 <div ng-repeat="mlt in mls.thirdLists">
 ``````
 <menu-bar>
  ``````
 </menu-bar>
 ``````
 </div>
 ``````
 </menu-bar>
 ``````
 </div>
 ``````
</div>
//directive
angular.module('',[]).directive('menuBar',function (){
 return {
 restrict: 'E',
 replace: true,
 link: function (scope, element, attr){
 //操作菜单的逻辑代码
 }
 }
});

    修改之后我们将我们操作动态加载的DOM结构的指令放入ng-repeat中,此时逻辑正常执行,在link函数中能打印出DOM结构。

以上所述是小编给大家介绍的AngularJS动态菜单操作指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
javascript实现下拉菜单效果
Feb 09 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 #Javascript
详解JS中的attribute属性
Apr 25 #Javascript
node.js中debug模块的简单介绍与使用
Apr 25 #Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 #Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 #Javascript
json的结构与遍历方法实例分析
Apr 25 #Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 #jQuery
You might like
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python中requests模块的使用方法
2015/04/08 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python中单例模式总结
2018/02/20 Python
python中的变量如何开辟内存
2018/06/26 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
父亲生日宴会答谢词
2014/01/10 职场文书
创先争优承诺书范文
2014/03/31 职场文书
119消防日活动总结
2014/08/29 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
亲属关系公证书样本
2015/01/23 职场文书