AngularJS中的DOM操作用法分析


Posted in Javascript onNovember 04, 2016

本文实例讲述了AngularJS中的DOM操作用法。分享给大家供大家参考,具体如下:

在angular中使用第三方插件时最好都封装到指令(directives)中去,DOM操作也最好都解构到指令中。

避免使用 jQuery 来操作 DOM,包括增加元素节点,移除元素节点,获取元素内容,隐藏或显示元素。你应该使用 directives 来实现这些动作,有必要的话你还要编写自己的 directives。

如果你感到很难改变习惯,那么考虑从你的网页中移除 jQuery 吧。真的,AngularJS 中的 $http 服务非常强大,基本可以替代 jQuery 的 ajax 函数,而且 AngularJS 内嵌了 jQLite —— 它内部实现的一个 jQuery 子集,包含了常用的 jQuery DOM 操作方法,事件绑定等等。但这并不是说用了AngularJS 就不能用 jQuery 了。如果你的网页有载入 jQuery 那么 AngularJS 会优先采用你的 jQuery,否则它会 fall back 到 jQLite。

需要自己编写 directives 的情况通常是当你使用了第三方的 jQuery 插件。因为插件在 AngularJS 之外对表单值进行更改,并不能即时反应到 Model 中。例如我们用得比较多的 jQueryUI datepicker 插件,当你选中一个日期后,插件会将日期字符串填到 input 输入框中。View 改变了,却并没有更新 Model,因为 $('.datepicker').datepicker(); 这段代码不属于 AngularJS 的管理范围。我们需要编写一个directive 来让 DOM 的改变即时更新到 Model 里。

var directives = angular.module('directives', []);
directives.directive('datepicker', function() {
  return function(scope, element, attrs) {
    element.datepicker({
      inline: true,
      dateFormat: 'dd.mm.yy',
      onSelect: function(dateText) {
        var modelPath = $(this).attr('ng-model');
        putObject(modelPath, scope, dateText);
        scope.$apply();
      }
    });
  }
});

然后在 HTML 中引入这个 direcitve

<input type="text" datepicker ng-model="myObject.myDateValue" />

说白了 directive 就是在 HTML 里写自定义的标签属性,达到插件的作用。这种声明式的语法扩展了 HTML。

需要说明的是,有一个 AngularUI 项目提供了大量的 directive 给我们使用,包括 Bootstrap 框架中的插件以及基于 jQuery 的其他很热门的 UI 组件。还有http://www.ngnice.com 社区贡献的ngshowcase。 AngularJS 的社区很活跃,生态系统健全。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 #Javascript
AngularJS模板加载用法详解
Nov 04 #Javascript
jQuery 遍历map()方法详解
Nov 04 #Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 #Javascript
jQuery图片加载显示loading效果
Nov 04 #Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 #Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 #Javascript
You might like
PHP 编程的 5个良好习惯
2009/02/20 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
Python高级用法总结
2018/05/26 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python批量处理txt文件的实例代码
2020/01/13 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
super关键字的用法
2012/04/10 面试题
音乐表演专业毕业生求职信
2013/10/14 职场文书
广告创意求职信
2014/03/17 职场文书
利群广告词
2014/03/20 职场文书
汽车专业求职信
2014/06/05 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
发布会邀请函
2015/01/31 职场文书
师范生见习自我总结
2015/06/23 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
用Python生成会跳舞的美女
2022/01/18 Python
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技