Angular JS在IE9上不起作用

Angular JS not working on IE9

本文关键字:不起作用 IE9 JS Angular      更新时间:2023-09-26

我正在尝试将网页迁移到角度JS。这是一个简单的SPA。它只有基本组件,如标签、文本框和下拉菜单。我可以让页面在chrome和Firefox上运行。但是,完美漂亮的页面在IE9上失败。在IE9中,我什至无法获得角度JS工作。页面加载后,我立即收到以下JS错误:

SCRIPT5007:预期
对象 角度.js,第 318 行 字符 12
SCRIPT438:对象不支持属性或方法"模块"
引用模块.js,第 6 行字符 1
SCRIPT5007:无法获取属性"控制器"的值:对象为空或未定义
引用模块控制器.js,第 6 行字符 1

我想提一下,除了ng-app(在html标签中(和ng-controller(在bodytag中(之外,我没有在html中使用任何角度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', [] );

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

谢谢

查看包括angular.js,refernce-module.js和refernce-module-conroller.js的HTML代码会很有帮助。因为从错误消息中,我猜 angular 关键字无法正确识别,因此 .module、referenceDataMaintenanceenceApp 赋值和 .controller 将不起作用。

也许这个线程可能会有所帮助。

似乎某些 ECMA5 功能在 IE9 中不起作用。我一直在IE8中移植AngularJS应用程序以测试其兼容性,您还可以尝试以下对我有帮助的技巧:

    ES5
  1. 填充码和 ES5 Sham (Object.Create polyfill 需要(
  2. 用于 JSON 处理的 JSON3 polyfill
  3. 使用Angular 1.2.x,它可以无缝工作到IE8
  4. 使用 jQuery 1.x.x
  5. 始终 AngularJS 之前包含 jQuery,因为 Angular 有自己的 jQueryLite,它倾向于使用它,这可能会导致旧浏览器中的错误

希望对您有所帮助!

出现此问题的原因是 AngularJS 代码的某些部分最初与 IE9 不兼容。我遇到了同样的问题,您需要做的就是在 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>