背景
隨着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應用遇到的一些問題以及解決方案，如果你有更好的解決方案，請告訴我。
那么今天的文章就到這里了，如果文章中有什么問題請告訴我，謝謝！