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 相关文章推荐
jQuery DOM操作实例
Mar 05 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
vue地区选择组件教程详解
May 04 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
vue给对象动态添加属性和值的实例
Sep 09 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
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
24式加速你的Python(小结)
2019/06/13 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python代码区分大小写吗
2020/06/17 Python
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
研究生自荐信
2013/10/09 职场文书
行政助理岗位职责
2013/11/10 职场文书
农民入党思想汇报
2014/01/03 职场文书
个人委托书范文
2015/01/28 职场文书
开学典礼校长致辞
2015/07/29 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers