AngularJS 1.5.1与jQuery 3.2.1在IE8及以上版本运行报错求助

看起来你遇到了两个核心问题：jQuery依赖加载顺序错误和IE8不兼容的语法及代码语法错误，我来一步步帮你解决：

一、解决jQuery未定义的系列错误 #

所有jQuery is undefined和requires jQuery的错误，本质都是依赖jQuery的库在jQuery本身之前加载了，另外还有一个关键细节：jQuery 3.x版本已经放弃了IE8支持，这也是你在IE8下运行的隐形障碍。

修复方案： #

1. 降级jQuery版本：把jQuery 3.2.1换成支持IE8的版本，比如jQuery 2.2.4（2.x分支最后一个支持IE8的版本）或者jQuery 1.12.4。
2. 调整加载顺序：严格按照「先加载jQuery → 再加载所有依赖jQuery的库 → 最后加载AngularJS及相关插件」的顺序加载脚本：

<!-- 第一步：先加载兼容IE8的jQuery -->
<script src="path/to/jquery-2.2.4.min.js"></script>

<!-- 第二步：加载所有依赖jQuery的第三方库 -->
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/jquery.validate.js"></script>
<script src="path/to/jquery.dataTables.js"></script>
<script src="path/to/bootstrap-dataTables.js"></script>
<script src="path/to/bootstrap-datepicker.js"></script>
<script src="path/to/bootstrap-datepicker.it.min.js"></script>
<script src="path/to/jasny-bootstrap.js"></script>
<script src="path/to/bootstrap-datetimepicker.min.js"></script>

<!-- 第三步：加载AngularJS及相关插件 -->
<script src="path/to/angular-1.5.1.min.js"></script>
<script src="path/to/angular-datatables.js"></script>
<script src="path/to/restangular.js"></script>
<script src="path/to/ui-router.js"></script>
<!-- 其他Angular依赖插件... -->
<script src="path/to/app.js"></script>

二、解决SCRIPT1003错误及模块无法实例化问题 #

SCRIPT1003: ':' expected错误直接来自scope.$emit("fileSelected", { files });这一行，同时你的app.js还有其他语法错误，共同导致了[$injector:modulerr]模块实例化失败。

1. 修复IE8不兼容的ES6语法 #

IE8完全不支持ES6的对象字面量简写语法（{ files }是{ files: files }的简写），必须改成完整的键值对形式：

// 错误写法（IE8不识别）
scope.$emit("fileSelected", { files });

// 正确兼容写法
scope.$emit("fileSelected", { files: files });

2. 修复app.js中的语法错误 #

你的app.js存在多处语法问题，我帮你修正并格式化：

// 修正模块依赖数组格式（可选，但更清晰）
var myApp = angular.module('myApp', [ 
  'restangular', 
  'ui.router', 
  'ngMessages', 
  'pascalprecht.translate',
  'ui.bootstrap',
  'angularSoap',
  'ngTagsInput', 
  'myApp.controllers', 
  'myApp.services', 
  'myApp.filters',
  'datatables' 
]);

// 拆分嵌套的config方法（原代码错误地在一个config里嵌套另一个config）
myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.when('index.html', '/index');
  $stateProvider
    .state('index', { url: '/index', templateUrl: 'home.html' })
    .state('popup', { url : '/popup', params: { Model: null } });
});

myApp.config(function($locationProvider, RestangularProvider) {
  RestangularProvider.setBaseUrl(location.pathname);
});

// 第一个run方法保持不变（格式优化）
myApp.run(['$rootScope', '$location', '$state',function($rootScope, $location, $state) {
  $rootScope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams) {
    $rootScope.currentNavLink = $location.path();
  });
}]);

// 修复第二个run方法的括号不匹配、拼写错误（'poup'→'popup'）
myApp.run(function($rootScope, $modal, $state) {
  $rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
    if (toState.name === 'popup') {
      var modalInstance = $modal.open({ 
        templateUrl: 'popup.html', 
        controller: 'PopupController', 
        backdrop: 'static', 
        keyboard: false, 
        size: 'lg' 
      });
      modalInstance.Model = toParams.Model;
      event.preventDefault();
    } else { 
      return; 
    }
  });
});

// 修复directive中的简写语法
myApp.directive('fileUpload', function () {
  return { 
    scope: true, 
    link: function (scope, el, attrs) {
      el.bind('change', function (event) {
        var files = event.target.files;
        scope.$emit("fileSelected", { files: files });
      }); 
    } 
  };
});

最后验证步骤 #

1. 替换jQuery为兼容IE8的版本，调整脚本加载顺序。
2. 替换app.js为修正后的代码。
3. 清空IE浏览器缓存（IE8缓存容易导致旧代码残留），重新加载页面测试。

内容的提问来源于stack exchange，提问作者Hassen