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插件分享
May 22 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
javascript中this用法实例详解
Apr 06 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
介绍一下28个JS常用数组方法
May 06 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的一些基础知识分享
2011/07/27 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP制作用户注册系统
2015/10/23 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python实现顺序表的简单代码
2018/09/28 Python
python路径的写法及目录的获取方式
2019/12/26 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
简历中求职的个人自我评价
2013/12/03 职场文书
实习教师自我鉴定
2013/12/09 职场文书
工作的心得体会
2013/12/31 职场文书
三个儿子教学反思
2014/02/03 职场文书
禁烟标语大全
2014/06/11 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
单位委托书格式范本
2014/09/29 职场文书
党的作风建设心得体会
2014/10/22 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis