背景

　　随着mvvm逐渐成熟，现在使用jQuery构建web应用已经显得过时了，而且使用jQuery需要编写更多的代码去控制dom的取值、赋值、绑定事件等，而mvv从底层实现了对以上操作的支持，让程序员可以从原始的复杂、重复的编码中解放出来，让程序员可以将更多的重心放在业务的实现、数据的交互上去，而且大大减少了程序员需要编写的代码量。

　　多年来的web经验告诉我们，编写web应用最难的地方主要在于浏览器的兼容问题，而且更多的兼容问题主要体现在ie上，因此只要能解决ie上的问题，那么这个web应用的其他问题都不再是问题了。

　　今天，我将使用angualrjs来构建兼容浏览器的web应用，其实主要是解决ie下的一些问题，大致如下：

  • ie下构建app
  • ie下a标签unsafe问题
  • ie下ngSrc无法正确绑定问题
  • ie下ngMouseleave的问题
  • ie下创建service的一些问题
  • ie下使用swfupload的一些问题

　　这里将使用angular的1.0.7版本，这是由于该版本对于ie低版本的支持较好，且存在的BUG较少，而高版本在ngShow、ngHide、ngBindHtml等标签上都会出现严重的问题。

ie下构建app

　　在chrome、ff等浏览器下，我们可以直接在html或者body标签上直接绑定ngApp来绑定angularjs的应用，但是在ie下是无法实现的，这是由于低版本的ie不支持html5的一些特性以及JSON对象，因此我们需要引入2个js来解决这个问题：

　　有了以上2个js文件后，ie下绑定ngApp的方式也略微有点区别，需要有class、ngApp、id的支持，代码如下：

<body class="ng-app:myApp" id="ng-app" ng-app="myApp">

ie下a标签unsafe问题

　　当a标签的href绑定有效的url时，无法触发绑定其他事件，如：click，但是如果没有href或者href为空，在ie下则会出现unsafe的问题，因此需要给href绑定javascript:void(0)，这样既能解决unsafe的问题又能解决无法触发事件的BUG。

ie下ngSrc无法正确绑定问题

　　在ie下，不管是使用ng-src或者ng-src="{{ xx }}"都无法让img显示图片，而且在低版本ie下使用属性="{{xx}}"都是无法实现你想要的功能的，因此只能使用自定义的指令去实现某些不支持的标签。

　　这里我自己实现了一个customSrc的指令去解决ie下ngSrc的问题，大致代码如下：

myApp.directive('customSrc', function () {

	return {

		scope: {

			data: '='

		},

		link: function (scope, element, attrs) {

			scope.$watch('data', function (v) {

				if (!v)

					return;

				element.attr('src', v);

			});

		}

	};

});

ie下ngMouseleave的问题

　　其实这不算是ng-mouseleave的bug，而是ie下，对于mouseleave和mouseover的表现不同而已，首先我们来看一段html代码，如：

<div ng-click="display=!display">下拉单</div>

<div ng-show="display" ng-mouseleave="display=false">

	<div>标题</div>

	<ul>

		<li>item1</li>

		<li>item2</li>

		<li>item3</li>

	</ul>

</div>

　　在chrome、ff等浏览器下，这个脚本运行的还是很顺利的，但是在ie下会出现一个问题，就是当鼠标移入ul的时候，下拉单的列表层会消失，但是在ul内加上ng-mouseover="display=true"以后，这个BUG就可以解决了

ie下创建service的一些问题

　　当我在创建模块的时候，如果模块只有一个方法时，我一般会直接返回这个函数，示例代码为：

//seajs

module.exports = function (){

	//coding

};

//angular

myApp.service('$fn', function (){

	return function (){

		//coding

	};

});

　　在ie下，$fn()是无法正确调用的，会出现异常，因此需要做些许调整，代码如：

//angular

myApp.service('$fn', function (){

	return {

		exec: function (){

			//coding

		}

	};

});

　　在ie下使用$fn.exec()就不会出现问题了。

ie下使用swfupload的一些问题

　　使用swfupload在低版本的ie下，最常出现的问题是flash的版本问题，因此首先得保证ie下flash的版本。

　　偶尔会遇到"例外被抛出且未被接住"，出现该异常的时候，主要注意2个问题：

　　1、后台返回数据的时候，需要设置响应流的Head的ContentType为text/html; charset=UTF-8

　　2、ie下绑定swfupload的button_placeholder的元素不能包含在ng-repeat内，如：

//html

<li ng-repeat="m in imgs">

	<a href="javascript:void(0)">

		<img data="m" width="178" height="178" custom-src />

	</a>

</li>

　　当我们要将最后一个li的元素绑定到swfupload的button_placeholder上时，低版本ie下就会出现以上的错误，因此在使用当中要注意。

结尾

　　以上是我在开发兼容浏览器angular应用遇到的一些问题以及解决方案，如果你有更好的解决方案，请告诉我。

　　那么今天的文章就到这里了，如果文章中有什么问题请告诉我，谢谢！

构建兼容浏览器的Angularjs web应用的更多相关文章

  1. Angularjs web应用

    构建兼容浏览器的Angularjs web应用 背景 随着mvvm逐渐成熟,现在使用jQuery构建web应用已经显得过时了,而且使用jQuery需要编写更多的代码去控制dom的取值.赋值.绑定事件等 ...

  2. 25个超有用的 AngularJS Web 开发工具

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,改善了JavaScript. 下面我要说的就是25个超有用的AngularJS工具, ...

  3. AngularJs + Web API 页面开发（一）

    AngularJS这个JS框架是个神马东东我也不太清楚,我也是初学者~~ AngularJS适用于single page App,单页面程序都是局部刷新的,这一点和Ajax有第一的区别,因为使用Aja ...

  4. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  5. iframe框架在IE浏览器，360兼容浏览器下将白色背景设为透明色

    <IFRAME ID="Frame1" SRC="transparentBody.htm"></IFRAME> iframe在大部分浏览 ...

  6. 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想

    总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...

  7. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

  8. 【转发】构建高可伸缩性的WEB交互式系统（下）

    原文转自:http://kb.cnblogs.com/page/504518/ 本文是<构建高可伸缩性的WEB交互式系统>系列文章的第三篇,以网易的NEJ框架为例,对模块的可伸缩性进行分析 ...

  9. 【转发】构建高可伸缩性的WEB交互式系统（中）

    原文转自:http://kb.cnblogs.com/page/503953/ 在<构建高可伸缩性的WEB交互式系统>的第一篇,我们介绍了Web交互式系统中平台的可伸缩性.本文将描述模块的 ...

随机推荐

  1. sp_addlinkedserver '(null)' is an invalid product name

    使用SSMS 2008客户端工具逆向生成了创建链接服务器的脚本时,在测试环境执行是报如下错误:'(null)' is an invalid product name. USE [master] GO ...

  2. Replication-Replication Distribution Subsystem: agent xxxxxx failed. Column names in each table must be unique

    最近遇到一个关于发布订阅(Replication)的奇葩问题,特此记录一下这个案例.我们一SQL SERVER数据库服务器出现大量告警.告警信息如下所示: DESCRIPTION: Replicati ...

  3. goldengate abended with no data found

    先来看下报错ggserr.log: 2016-12-22 04:48:52  WARNING OGG-02544  Unhandled error (ORA-26787: The row with k ...

  4. OAF通过Iterator标准遍历各行

    这两天本人接到客户反映的bug:oaf的采购订单页面,在添加超过10行提交后,会出现空指针异常.原来,oaf的默认显示行数为10行,超过10行,页面会分页.报空指针异常,就是因为没有取到分页的行.之前 ...

  5. 烂泥：dnsmasq搭建简易DNS服务器

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 今天我们来介绍一个比较简单的DNS服务器dnsmasq.这款软件,已经被我成功使用到公 ...

  6. Resize Instance 操作详解 - 每天5分钟玩转 OpenStack（41）

    Resize 的作用是调整 instance 的 vCPU.内存和磁盘资源. Instance 需要多少资源是定义在 flavor 中的,resize 操作是通过为 instance 选择新的 fla ...

  7. linux下 mysql数据库的备份和还原

    1.备份 [root@CentOS ~]# mysqldump -u root -p mysql > ~/mysql.sql #把数据库mysql备份到家目录下命名为mysql.sql Ente ...

  8. MVC中的ActionLink生成的属性名称 中划线的解决办法

    当使用ActionLink来生成链接属性时,由于中划线的变量名称不符合命名规则,那么直接写中划线的变量时无法编译,此时只要改为下划线即可.Razor 引擎会自动转为中划线. 即 data_icon   ...

  9. Junit测试Controller（MockMVC使用），传输@RequestBody数据解决办法

    一.单元测试的目的 简单来说就是在我们增加或者改动一些代码以后对所有逻辑的一个检测,尤其是在我们后期修改后(不论是增加新功能,修改bug),都可以做到重新测试的工作.以减少我们在发布的时候出现更过甚至 ...

  10. 使用IntelliJ IDEA搭建多maven模块JAVA项目

    一.新建项目和模块 步骤: 1. 新建一个项目,因为maven管理jar包非常方便,故此处建立一个maven项目:New Project->Maven->(Create from arch ...