AngularJS中的DOM操作用法分析
本文实例讲述了AngularJS中的DOM操作用法。分享给大家供大家参考，具体如下：
在angular中使用第三方插件时最好都封装到指令（directives）中去，DOM操作也最好都解构到指令中。
避免使用jQuery来操作DOM，包括增加元素节点，移除元素节点，获取元素内容，隐藏或显示元素。你应该使用directives来实现这些动作，有必要的话你还要编写自己的directives。
如果你感到很难改变习惯，那么考虑从你的网页中移除jQuery吧。真的，AngularJS中的$http服务非常强大，基本可以替代jQuery的ajax函数，而且AngularJS内嵌了jQLite——它内部实现的一个jQuery子集，包含了常用的jQueryDOM操作方法，事件绑定等等。但这并不是说用了AngularJS就不能用jQuery了。如果你的网页有载入jQuery那么AngularJS会优先采用你的jQuery，否则它会fallback到jQLite。
需要自己编写directives的情况通常是当你使用了第三方的jQuery插件。因为插件在AngularJS之外对表单值进行更改，并不能即时反应到Model中。例如我们用得比较多的jQueryUIdatepicker插件，当你选中一个日期后，插件会将日期字符串填到input输入框中。View改变了，却并没有更新Model，因为$('.datepicker').datepicker();这段代码不属于AngularJS的管理范围。我们需要编写一个directive来让DOM的改变即时更新到Model里。
vardirectives=angular.module('directives',[]);
directives.directive('datepicker',function(){
returnfunction(scope,element,attrs){
element.datepicker({
inline:true,
dateFormat:'dd.mm.yy',
onSelect:function(dateText){
varmodelPath=$(this).attr('ng-model');
putObject(modelPath,scope,dateText);
scope.$apply();
}
});
}
});
然后在HTML中引入这个direcitve
<inputtype="text"datepickerng-model="myObject.myDateValue"/>
说白了directive就是在HTML里写自定义的标签属性，达到插件的作用。这种声明式的语法扩展了HTML。
需要说明的是，有一个AngularUI项目提供了大量的directive给我们使用，包括Bootstrap框架中的插件以及基于jQuery的其他很热门的UI组件。还有http://www.ngnice.com社区贡献的ngshowcase。AngularJS的社区很活跃，生态系统健全。
希望本文所述对大家AngularJS程序设计有所帮助。