AngularJs 开发遇到的问题,以及解决方案
1》ng-if 导致 ng-model 失效的问题
比如说下拉联动隐藏显示的时候,多个验证模块,需要使用到ng-if。可以使用 $parent 来解决这个问题 ng-model="$parent.userName" ;
如果存在 ng-if 的嵌套情况,$parent.$parent 逐级嵌套$parent就可以了,如下图所示。
终极的解决方案是把 vm 的对象用字面量包装起来; $scope.vm = { kaCustomerType : "" , kaParentMobile: ""}
2》$scope.$new(false) // false 和 true 可以改变是否共享$scope作用域
日期赋值的问题:
业务代码:
3》如何在 Controller 层去使用 $filter 过滤器 :
//获取日期和时间
var date=$filter("date")($scope.getDate,"yyyy-MM-dd HH:mm");
//将时间转换成时间戳
var dateIntValue = (+new Date(date))/1000;
4》使用拦截器($httpProvider interceptors) 来对(get、post)请求做过滤的统一操作,比方说使用场景如下:
用户授权模块,对http请求做统一的拦截,使用 AOP的方式动态在请求中注入 token的参数,对请求超时做处理
5: $provide.decorator 装饰器进行重写现有的指令等等
6: 数组重复循环遇到的问题:Angular ng-repeat Error “Duplicates in a repeater are not allowed.”
问题:遇到了 ng-repeat 循环的报错问题,原来是重复的问题造成的
解决方案:ng-repeat="item in ['家常菜','cancel','地方菜','cancel','试试看看'] track by $index"
7. 利用 $injector 动态的注入服务,可以在一些 特殊情况下使用,比如下面这种情况,在拦截器中可以使用的到。
8:在指定中 去给元素增加一个class,没有效果,不能加上,试试使用$timeout去延迟一下,如下图所示:
9: 我们如何去针对 array 做 $watch,监听所有对象属性的变化,这里深度 $watch,区别如下图所示:
1: $watch(obj, listener); 2: $watchCollection(obj, listener); 3: $watch(obj, listener,true);
地址:http://teropa.info/blog/2014/01/26/the-three-watch-depths-of-angularjs.html
10 : $scope 监听的 属性重定义,会导致一些非chrome的浏览器下报错(redefine property),如下图所示:
报错信息如下图:
11. 我们在做组件开发中,拼接的字符串中做的vm 绑定为什么没有效果,解决方案如下图:
12: 一个 时间戳转换的问题,让我纠结了一天,并且陷入了深深的思考:
接口1,返回数据:
{id:1, date1:'2015-08-30'}
接口2,返回数据:
{id:1, date2:'2015/08/30'}
问题就出现在,返回的时间格式不一样, 导致了时间戳转换的数值不一样,控制台测试如下:
测试结果发现 : (date1).valueOf() 比 (date2).valueOf() 默认多8小时 , 原因就是格式导致的。
我们可以这样解决,统一的用$filter 来转换一下:
var dateFormat = $filter("date")(date1,"yyyy/MM/dd"); var dateStamp=+new Date(dateFormat);
参考地址:http://web.jobbole.com/83453/ 你不知道的JS原生Date里埋的坑
13:如何利用 ng-include 引入同一模板,使用不同的作用域
14: 多采用 Promise 的方式去维护组件,保持一样的组件风格,基本上Angular Meterial 全部的组件都采用了 Promise的方式来维护以及 angular-ui-bootstrap 也是
15:一个测试获取图片数据的网站:http://lorempixel.com/50/50/people/
AngularJs 开发遇到的问题,以及解决方案的更多相关文章
- AngularJS 开发中常犯的10个错误
简介 AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客 ...
- 20个angularjs开发工具
AngularJS是那些渴望以动态方式来设计web app的web开发人员最偏爱的框架之一.如果你是一个希望启动AngularJS项目的开发人员,那么你可能需要帮助来挑选出趁手的工具…… 在Value ...
- AngularJS开发人员最常犯的10个错误
简介AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客户 ...
- 使用phonegap开发安卓HLS播放软件解决方案
目前使用phonegap开发的手机应用,很少涉及视频播放的功能,究其原因,主要是phonegap提供的API里面对视频播放功能支持度不够,当然播放音频一般情况下还是能够实现的,由于工作需要,自己研究了 ...
- AngularJs开发——控制器间的通信
AngularJs开发——控制器间的通信 指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制 ...
- AngularJS开发最常犯的10个错误
简介 AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客 ...
- 实践分享:开始用Cordova+Ionic+AngularJS开发App
http://www.cocoachina.com/webapp/20150707/12395.html 本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程 ...
- Winform开发中的困境及解决方案
在我们开发各种应用的时候,都会碰到很多不同的问题,这些问题涉及架构.模块组合.界面处理.共同部分抽象等方面,我们这里以Winform开发为例,从系统模块化.界面组件选择.业务模块场景划分.界面基类和辅 ...
- AngularJS开发指南4:指令的详解
指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...
随机推荐
- MySql语句常用命令整理---单表查询
初始化t_employee表 创建t_employee表 -- DROP TABLE IF EXISTS test; CREATE TABLE t_employee ( _id INTEGER PRI ...
- php 实现php代码的加密解密
php 代码加密类,大家可以根据自己的需求进行修改,原类如下,是对之前的加密解密类的有一次修改,希望能分享给大家.本次在ubuntu下测试没有问题,与之前的版本的区别在于,这次的版本更加的通用性. & ...
- MySQL数据类型--与MySQL零距离接触2-5字符型
CHAR(5) : 存储abc时,由于长度不够,所以abc后面会补充2个空格,也就是abc CHAR 0-255字节 定长字符串 VARCHAR 0-65535 字节 变长字符串 ENUM('valu ...
- .Net拾忆:从List去除重复-拾忆集合
方法1: private static List<int> DistinctList(List<int> list) {//去除重复 HashSet<int> ha ...
- 查看手机cpu信息
adb shell getprop ro.product.cpu.abi
- Selenium基础知识(四)表单切换
在测试过程中,经常会碰到frame和iframe,嵌套等情况 这种情况下直接通过id,name等等是无法定位到的 好在selenium替我们想到了这个问题switch_to方法解决问题 switch_ ...
- is_readable() 函数检查指定的文件是否可读。
定义和用法 is_readable() 函数判断指定文件名是否可读. 语法 is_readable(file) 参数 描述 file 必需.规定要检查的文件. 说明 如果由 file 指定的文件或目录 ...
- caffe在Linux下生成均值文件
参照博客:https://blog.csdn.net/sinat_28519535/article/details/78533319
- steam pipeGUI
SteamPipe GUI 工具 如果您运行的是 Windows,并且更喜欢使用 GUI 工具来帮助生成配置文件并上传您的生成版本,您可以使用 Steamworks SDK 的工具文件夹中的 Stea ...
- Vue系列之 => 使用钩子函数的第二个参数传参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...