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有一套完整的.可扩展的.用来 ...
随机推荐
- 【Redis】主从同步
Redis提供了主从复制功能,主要是为了保证服务的高可用性.在redis.conf配置文件中通过设置,可以开启主从复制功能.或者在客户端中使用slaveof 命令开启该功能. slaveof < ...
- Mybatis中映射器实现方式总结
一种是通过XML文件方式(由一个java接口和一个XML文件构成) RoleMapper rm = session.getMapper(RoleMapper.class); List<Role& ...
- VS Code的golang开发配置 之 代码提示
之前用VS Code的时候,发现自己的代码的提示一直不好,换用JetBrain的Goland的代码提示是好了,但是比较占用资源.在网上找了一些资料,发现很多人也是遇到第三方或者自己的代码无法提示的情况 ...
- malloc调用后经历了什么?
进程生成虚拟地址空间,有堆地址,由于是虚拟地址,所以没有做内存碎片化处理,只是在虚拟内存不够的时候调用brk,进行堆大小的调整,然后申请到虚拟内存是页,同MMU映射到物理地址,然后并不是每个页都预先加 ...
- python中的filter、map、reduce、apply用法
1. filter 功能: filter的功能是过滤掉序列中不符合函数条件的元素,当序列中要删减的元素可以用某些函数描述时,就应该想起filter函数. 调用: filter(function,seq ...
- iOS UI进阶-1.1 Quartz2D 图片水印/裁剪/截图
图片水印 UIImage+MJ.h #import <UIKit/UIKit.h> @interface UIImage (MJ) /** * 打水印 * * @param bg 背景图片 ...
- node.js初识06
node中的fs文件系统 var http = require("http"); var fs = require("fs"); var server = ht ...
- UVA 10256 The Great Divide(点在多边形内)
The Great Divid [题目链接]The Great Divid [题目类型]点在多边形内 &题解: 蓝书274, 感觉我的代码和刘汝佳的没啥区别,可是我的就是wa,所以贴一发刘汝佳 ...
- tp连贯操作
链接数据库 首先写配置文件 复制concentration.php中的 /* 数据库设置 */ 'DB_TYPE' => '', // 数据库类型 'DB_HOST' => '', // ...
- oauth2.0+app方式 webgis 授权
.认证方式有三种 Oauth2.0, Token-based http/windows 二.用户登录与应用登录区别 两者区别在于:当用户登录时,服务器端平台是否直接识别登录信息和验证登录信息. 应用登 ...