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单元测试框架QUnitjs详细介绍
May 08 Javascript
js处理表格对table进行修饰
May 26 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
canvas的神奇用法
Feb 03 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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实现的pdo公共类定义与用法示例
2017/07/19 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
10款最好的Python开发编辑器
2019/07/03 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
大学生个人求职信范文
2013/09/21 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
导游词之青岛崂山
2019/12/27 职场文书
python基础入门之字典和集合
2021/06/13 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
Linux中各个目录的作用与内容
2022/06/28 Servers