Rumah > hujung hadapan web > tutorial js > AngularJS移动开发中的坑

AngularJS移动开发中的坑

高洛峰
Lepaskan: 2016-11-18 11:52:35
asal
1094 orang telah melayarinya

相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的。

DOM操作的问题

        避免使用 jQuery 来操作 DOM,包括增加元素节点,移除元素节点,获取元素内容,隐藏或显示元素。你应该使用 directives 来实现这些动作,有必要的话你还要编写自己的 directives。

       在网站Web前端开发中,如果你感到很难改变习惯,那么考虑从你的网页中移除 jQuery 吧。真的,AngularJS 中的 $http 服务非常强大,基本可以替代 jQuery 的 ajax 函数,而且 AngularJS 内嵌了 jQLite ?? 它内部实现的一个 jQuery 子集,包含了常用的 jQuery DOM 操作方法,事件绑定等等。但这并不是说用了AngularJS 就不能用 jQuery 了。如果你的网页有载入 jQuery 那么 AngularJS 会优先采用你的 jQuery,否则它会 fall back 到 jQLite。

       如果是移动App或移动Web开发,建议不要引入Jquery了,如果实在需要jquery的某些功能,引入Zepto.js吧。不过请相信我,用了AngularJS,你不会需要Jquery的!

       需要自己编写 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();
           }
       });
   }
});
Salin selepas log masuk

然后在 HTML 中引入这个 directive

<input type="text" datepicker ng-model="myObject.myDateValue" />
Salin selepas log masuk

Directive 就是在 HTML 里写自定义的标签属性,达到插件的作用,有效补充了HTML的功能。这种声明式的语法扩展了 HTML。建议项目中通用的功能和页面组件,都封装成Directive,方便使用和代码维护。

需要说明的是,有一个 AngularUI 项目提供了大量的 directive 给我们使用,包括 Bootstrap 框架中的插件以及基于 jQuery 的其他很热门的 UI 组件。 AngularJS 的社区现在很活跃,生态系统健全。

ngOption 中的 value

这是个大坑。如果你去查看 ngOption 生成的