AngularJS中的DOM操作用法分析
本文实例讲述了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元素。 但是，在某些用例中，在服务内部操作DOM似乎是可以接受的。Misko Hevery在这里谈论这个。您还可以在Bootstrap UI对话框中 找到示例。 Misko的解释很模糊，所以我想知道如何确定何时需要将DOM放入服务而不是指令中。 问题答案： 指令及其定义方式始终附加在DOM节点上。因此，当您定义指令时，它会“扩展”
-
问题内容： 当我使用jQuery执行DOM操作（添加新HTML）时，AngularJS不会自动检测新HTML中的变量并将其替换为它们的值。例如： 这是一个简单的例子，但在元素更改HTML（此功能被称为后），输出它仍然不是什么 行 应该在上下文/范围的意思。 问题答案： 您必须注入（http://docs.angularjs.org/api/ng.$compile）并使用它，以便对新html 有所了
-
本文向大家介绍jQuery中DOM操作实例分析，包括了jQuery中DOM操作实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery中DOM操作的方法。分享给大家供大家参考。具体分析如下： 这里主要设计的dom操作包括：dom对象的创建(JS方式和jquery方式)、属性的修改、样式的修改、动态绑定事件 代码如下： 希望本文所述对大家的jQuery程序设计有所帮助。
-
问题内容： 在遍历数据后，我遇到一些有关DOM操作的问题。 我们有一个与数据绑定并且可以正常工作的jQuery滑块插件，但是当使用时，我们必须将其初始化包装起来以使其起作用—现在甚至不起作用。 我认为使用是不可靠的，这将导致错误的修复。在jQuery中，我可以使用-这很可靠，但是使用似乎也不起作用。 调用了Slider指令，但由于没有将图像加载到DOM中而无法获得滑块中图像的高度-导致滑块的计算高
-
大部分情况下你不需要通过查询 DOM 元素去更新组件的 UI，你只要关注设置组件的状态（setState）。但是可能在某些情况下你确实需要直接操作 DOM。 首先我们要了解 ReactDOM.render 组件返回的是什么？ 它会返回对组件的引用也就是组件实例（对于无状态状态组件来说返回 null），注意 JSX 返回的不是组件实例，它只是一个 ReactElement 对象（还记得我们用纯 JS
-
jQuery的选择器很强大，用起来又简单又灵活，但是搞了这么久，我拿到了jQuery对象，到底要干什么？ 答案当然是操作对应的DOM节点啦！ 回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作！ 修改Text和HTML jQuery对象的text()和html(
-
由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。 始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作： 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容； 遍历：遍历该DOM节点下的子节点，以便进行进一步操作； 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点； 删
-
本文向大家介绍JavaScript中 DOM操作方法小结，包括了JavaScript中 DOM操作方法小结的使用技巧和注意事项，需要的朋友参考一下 DM是(Document Object Model)的简称。 一.找元素 document.getElementById() 根据id选择器找，最多找一个； document.getElementsByName() 根据name找，找出的是