小说阴阳冕,什么网络游戏最赚钱,牛股师的博客
本文实例讲述了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程序设计有所帮助。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论