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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 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
杏林同学录(五)
2006/10/09 PHP
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
js实现聊天对话框
2020/02/08 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python操作excel的方法
2018/08/16 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
高中军训感言500字
2014/02/24 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
高一作文之乐趣
2019/11/21 职场文书
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技