Angular JS 不适用于 IE9

Question

我正在尝试将网页迁移到 Angular JS。它是一个简单的SPA。它只有标签、texboxes 和下拉菜单等基本组件。我可以让页面在 chrome 和 Firefox 上运行。然而，完美的页面在 IE9 上失败了。在 IE9 中，我什至无法让 Angular JS 工作。页面加载后，我会收到以下 JS 错误：

SCRIPT5007：预期对象
angular.js，第 318 行字符 12
SCRIPT438：对象不支持属性或方法“模块”
引用-module.js，第 6 行字符 1
SCRIPT5007：无法获取属性“控制器”的值：对象为空或未定义
参考模块控制器.js，第 6 行字符 1

我想提一下，除了 ng-app（在 html 标签中）和 ng-controller（在 bodytag 中）之外，我没有在 html 中使用过任何 Angular JS。

以下是控制器js代码：

referenceDataMaintainenceApp.controller('referenceDataMaintainenceCtrl', function ($scope) {

$scope.lookup_codes = [
    {'key':'FS_ASSET_CLASS','value':'ASSET CLASS - FS'},
    {'key':'account_actc','value':'Non ASSET CLASS - FS'},
    {'key':'account_fee_type_cd','value':'Account Fee Types'}
];




$scope.change_lookup = function() {
   // console.log(new Date('2014-05-02').getTime());
    var key = $scope.lookup_codes_model.key;
    if(key == 'FS_ASSET_CLASS') {
        $scope.lookup_codes_details = [{'name':'ASSET CLASS','description':'Testing the code lookup module for ASSET CLASS.', 'active':true}];
    } else {
        $scope.lookup_codes_details = [];
    }
};


$scope.addLookupCode = function() {

    $scope.lookup_codes_details.push($scope.new_lookup_code);
    $scope.new_lookup_code = getLookupCodeObject();


};

/*----------------------benchmark-----------------------------*/      

$scope.benchmarks_details = [{'name':'Bench 1','description':'BenchMark 1', isNew : false},
                             {'name':'Bench 2','description':'BenchMark 2', isNew : false}];

$scope.addBenchMark = function() {

    $scope.benchmarks_details.push($scope.new_benchmark);
    $scope.new_benchmark = getBenchMarkObject();

  };




  /*----------------------holidays-----------------------------*/    

$scope.calendar_countries = [
                            {'key':'AUST','value':'AUSTRALIA'},
                            {'key':'CANADA','value':'CANADA'},
                            {'key':'CHINUK','value':'CHINA UK'}
                           ];
$scope.calendar_years = [
                            {'key':'2012','value':'2012'},
                            {'key':'2013','value':'2013'},
                            {'key':'2014','value':'2014'}
                        ];

$scope.change_holiday = function() {
    var calendar = $scope.calendar_countries_model;
    var year     = $scope.calendar_years_model;
    if(angular.isUndefined(calendar) || 
            angular.isUndefined(year))
        return;
    else {
        if(calendar.key == 'AUST' && 
                year.key == '2014') {
            $scope.calendar_details = [{'date':'1388620800000','description':'New Year', isdelete : false},
                                         {'date':'1398988800000','description':'May Day', isdelete : false}];
        }
        else {
            $scope.calendar_details = [];
        }
    }
    //console.log($scope.calendar_years_model);

};


$scope.addHoliday = function() {

    $scope.calendar_details.push($scope.new_holiday);
    $scope.new_holiday = getHolidayObject();


};


/*----------------------User Defined PAM Fields-----------------------------*/    

$scope.data_types = [
                            {'key':'date','value':'Date'},
                            {'key':'float','value':'Float'},
                            {'key':'int','value':'Integer'}
                           ];
$scope.pam_screens = [
                            {'key':'account_select','value':'Account Details'},
                            {'key':'fund_select','value':'Fund Detail'}
                      ];

$scope.pams_fields = [{'name':'Benchmark Tolerance','label':'Benchmark Tolerance', 'type':'Date', 'screen': 'fund_select','active':true}];

$scope.addUsedDefPAMFields = function() {

    $scope.pams_fields.push($scope.new_pam_field);
    $scope.new_pam_field = getUserDefinedPamFieldsObject();


};

/*----------------------Broker Code Maintainence-----------------------------*/    


$scope.brokers_details = [{'name':'000200','description':'GREENWICH OPTIONS COMPANY', 'active':true},
                          {'name':'000202','description':'WEISS PECK AND GREER LLC', 'active':false}];

$scope.addBrokerCodes = function() {

    $scope.brokers_details.push($scope.new_brokers_detail_list);
    $scope.new_brokers_detail_list = getBrokerCodeObject();


}; 


});

function getLookupCodeObject () {

lookup_code = {
        name :  '', 
        description : '',
        active : false
};

return lookup_code;
}

function getBenchMarkObject () {

benchmark = {
        name :  '', 
        description : '',
        isNew : false
};

return benchmark;
}

function getHolidayObject () {

holiday = {
        date :  '', 
        description : '',
        isdelete : false
};

return holiday;
}

function getUserDefinedPamFieldsObject () {

pam_fields = {
        name :  '', 
        label : '',
        type : '',
        sceen : '',
        active : false
};
return pam_fields;
}

function getBrokerCodeObject () {

broker_code = {
        name :  '', 
        description : '',
        active : false
};
return broker_code;
}

以下是模块js代码：

var referenceDataMaintainenceApp = angular.module('referenceDataMaintainenceApp', [] );

请指导我解决此浏览器问题。

谢谢

Answer 1

查看包含 angular.js、refernce-module.js 和 referencence-module-conroller.js 的 HTML 代码会很有帮助。因为从错误消息中我猜想没有正确识别 angular 关键字，因此 .module、referenceDataMaintainenceApp 分配和 .controller 将不起作用。

也许this 这个帖子可能会有所帮助。

Answer 2

似乎某些 ECMA5 功能在 IE9 中不起作用。我一直在 IE8 中移植 AngularJS 应用程序以测试它的兼容性，您也可以尝试以下对我有帮助的提示：

1. ES5 Shim 和 ES5 Sham（Object.Create polyfill 需要）
2. JSON3 用于 JSON 处理的 polyfill
3. 使用 Angular 1.2.x，它可以在 IE8 之前无缝运行
4. 使用 jQuery 1.x.x
5. 始终包含 jQuery before AngularJS，因为 Angular 有自己的 jQueryLite，它倾向于使用它，这可能会在旧浏览器中导致错误

希望对你有帮助！

Answer 3

出现此问题是因为 AngularJS 代码的某些部分最初与 IE9 不兼容。我遇到了同样的问题，您需要做的就是在您的应用before AngularJS 中导入es5-shim，如下所示：

<!--[if lte IE 9]>
    <script src="lib/es5-shim/es5-shim.min.js"></script>
    <script src="lib/es5-shim/es5-sham.min.js"></script>
<![endif]-->
<script src="lib/angular/angular.min.js"></script>