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与特效 ...
随机推荐
- webService 跨域请求webconfig配置
在webService文件夹下单独添加一个web.config <?xml version="1.0" encoding="UTF-8"?>< ...
- Backbone.js
Backbone.js是一套JavaScript框架與RESTful JSON的應用程式介面.也是一套大致上符合MVC架構的編程範型.Backbone.js以輕量為特色,只需依賴一套Javascrip ...
- cocos2dx的build_win32.dat出现问题以及install-template-msvc.dat出现.js没有脚本引擎
关于cocos2dx-2.x.x版本当中出现build_win32.bat执行失败 (针对VS2013)应当在VS的安装路径查找msbuild的文件夹,再其中查找msbuild.exe文件找到四个东西 ...
- 解决chrome和IE样式兼容问题
在页面title中加入: <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> ...
- RGB颜色中的参数是变量的时候,为什么要加上两个+号在左右?
<script> function draw(){ var c=document.getElementById("mycanvas"); var cxt=c.getCo ...
- adb devices 端口占用
一. 1.通过cmd命令,输入adb devices查看连接设备时,报错 2 .通过adb nodaemon server 查看adb server绑定的端口.提示“通过每个套接字地址只能使用一次” ...
- 使用html2canvas实现批量生成条形码
/*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...
- lvs-keepalived故障记录
上图中1与2.3不同,可能会导致端口不同,尽量配置1.2.3相同
- shell 条件判断语句整理
常用系统变量 1) $0 当前程式的名称 2) $n 当前程式的第n个参数,n=1,2,…9 3) $* 当前程式的任何参数(不包括程式本身) 4) ...
- EDA技术与ASIC设计和FPGA开发有什么关系?FPGA在ASIC设计中有什么用途?
利用EDA技术进行电子系统设计的最后目标是完成专用集成电路ASIC的设计和实现:FPGA和CPLD是实现这一途径的主流器件.FPGA和CPLD通常也被称为可编程专用IC,或可编程ASIC.FPGA和C ...