首页 / ANGULAR / AngularJS中的DOM操作用法分析

AngularJS中的DOM操作用法分析

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS中的DOM操作用法分析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1916字，纯文字阅读大概需要3分钟。

内容图文

本文实例讲述了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程序设计有所帮助。

内容总结

以上是互联网集市为您收集整理的AngularJS中的DOM操作用法分析全部内容，希望文章能够帮你解决AngularJS中的DOM操作用法分析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/348577.html

来源：【匿名】