angularjs ng-option ie issue解决方案
最近遇见angularjs 在IE上当使用ng-options作为select的选项数据源,并且被套在ng-switch(ng-transclude)之类的,当angular上得ng-options数据源model改变后,在IE上并不渲染。
在一阵的测试和阅读相关文档后最后确认为:因为ng-switch(ng-transclude)是为了使其scope为原来的父scope,在父scope上生成了DOM后才克隆(cloneNode)到指定的指令位置。然而IE在对于select克隆的节点,不会主动去触发重绘,所以才有了上面的issue。
问题确定了,那我们所需要做的就是手动的去触发让IE对Select重绘,尝试了很多办法后最终确认有效的是:首先在options上用原生js去添加一个option,在马上移除掉这个option,所以解决方案如下:
angular.module('ie.select', []) .directive('ieSelectFix', [ function () { return { restrict: 'A', require: 'select', link: function (scope, element, attributes) { var isIE = document.attachEvent; if (!isIE) return; var control = element[0]; scope.$watch(attributes.ieSelectFix, function () { //it should be use javascript way, not jquery way. var option = document.createElement("option"); control.add(option, null); control.remove(control.options.length - 1); }); } } } ]);
使用方式如下:
<select ie-select-fix="options" ng-model="demos" class="form-control" ng-options="currOption.value as currOption.text for currOption in options"> <option value="" default>Select</option> </select>
我也在我的github专门创建了一个针对angularjs在IE上issue的项目,收录了这个指令,在后续也会加入我所遇见的angularjs关于ie的issue,也希望大家帮助完善这个项目,让我们的angularjs程序在IE工作的更美好,让我们这些辛苦的程序猿也少一点加班时间,多一点陪家人,泡咖啡的时间。哈哈。
github项目地址:https://github.com/greengerong/angular-ie-enhancer
angularjs ng-option ie issue解决方案的更多相关文章
- angularjs 页面缓存及动态刷新解决方案
一.准备工作 框架:angularjs ui组件库:ionic1 二.页面缓存cache 路由设置cache参数,true为缓存,false为不缓存,代码如下: angular.module('app ...
- Part 6 AngularJS ng repeat directive
ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...
- part 4 AngularJS ng src directive
- AngularJs ng-repeat重复项异常解决方案
ng-repeat="v in arr track by $index" <!DOCTYPE html> <html lang="en"> ...
- 常用的Issue解决方案(EF框架)
1.提交出错:ObjectStateManager 中已存在具有同一键的对象. ObjectStateManager 无法跟踪具有相同键的多个对象. 遇到此问题,首先要确定的是主键是否赋值,以及 ...
- Part 15 AngularJS ng init directive
The ng-init directive allows you to evaluate an expression in the current scope. In the following e ...
- [AngularJS] AngularJS系列(1) 基础篇
目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样 ...
- 从angularJS看MVVM
javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到angularJS[ng]这么重量级的 ...
- [Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
随机推荐
- .Net中的加密解密
返回博客列表 转 .Net中的加密解密 李朝强 发布时间: 2015/11/23 12:55 阅读: 33 收藏: 3 点赞: 0 评论: 0 在一些比较重要的应用场景中,通过网络传递数据需要进行加密 ...
- MYSQL使用mysqldump导出某个表的部分数据
命令格式如下: mysqldump -u用户名 -p密码 数据库名 表名 --where="筛选条件" > 导出文件路径 例子: 从meteo数据库的sdata表中导出sen ...
- redis五种数据类型的使用(zz)
redis五种数据类型的使用 redis五种数据类型的使用 (摘自:http://tech.it168.com/a2011/0818/1234/000001234478_all.shtml ) 1.S ...
- Http请求中Content-Type讲解以及在Spring MVC中的应用
引言: 在Http请求中,我们每天都在使用Content-type来指定不同格式的请求信息,但是却很少有人去全面了解content-type中允许的值有多少,这里将讲解Content-Type的可用值 ...
- C# 如何给sql数据库的日期字段插入空值
在C#中声明日期变量时用SqlDateTime类型,引用:using System.Data.SqlTypes; 例子:user.AbortDate = SqlDateTime.Null;
- RSpec shared examples with template methods
It’s pretty common to have multiple tests that are nearly the same. In one app, we support bidding o ...
- Get&Post简单说明
一.GET请求和POST请求简单说明 创建GET请求 1 // 1.设置请求路径 2 NSString *urlStr=[NSString stringWithFormat:@"http:/ ...
- win7/win8远程桌面 server 2003 卡的问题
原因在于从vista开始,微软在TCP/IP协议栈里新加了一个叫做“Window Auto-Tuning”的功能.这个功能本身的目的是为了让操作系统根据网络的实时性能(比如响应时间)来动态调整网络上传 ...
- MATLAB的crack安装小曲
MATLAB的crack安装小曲 本学期要学数学模型和数值分析,需要用MATLAB,便琢磨着装MATLAB.我同专业的同学会装MATLAB的crack,他是数学协会的理事长,平时爱吹牛,问他一个简单的 ...
- Eclipse JAVA项目的 目录结构 和 导入
说明:本文所有测试以java工程为例: 1. Eclipse下的java工程目录 eclipse的基本工程目录叫做workspace,每个运行时的eclipse实例只能对应一个workspace,也就 ...