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面象对象成员、共享成员变量实验
Nov 19 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
vue实现日历备忘录功能
Sep 24 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
PHP中操作ini配置文件的方法
2013/04/25 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
Python列表切片用法示例
2017/04/19 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python微信公众号开发简单流程实现
2020/03/09 Python
pytorch SENet实现案例
2020/06/24 Python
python中if嵌套命令实例讲解
2021/02/25 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
高中生学习的自我评价
2013/12/14 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
2014年班主任工作总结
2014/11/08 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
运动会广播稿300字
2015/08/19 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
浅谈Python协程asyncio
2021/06/20 Python