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 AutoScroller 函数类
May 29 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
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内置的Math函数效率测试
2014/12/01 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
JS实现求5的阶乘示例
2019/01/21 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
django使用html模板减少代码代码解析
2017/12/12 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Python简单实现区域生长方式
2020/01/16 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
药学专业大学生个人的自我评价
2013/11/04 职场文书
即兴演讲稿
2014/01/04 职场文书
幼儿园秋游感想
2014/03/12 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
国庆节演讲稿
2014/05/27 职场文书
师范生自荐信模板
2014/05/28 职场文书
分公司任命书
2014/06/06 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
高温慰问简报
2015/07/21 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript