Angular - 应用程序在 Chrome 中运行，但在 IE 中不运行答案

【问题标题】：Angular - App working in Chrome but not IEAngular - 应用程序在 Chrome 中运行，但在 IE 中不运行
【发布时间】：2016-09-14 18:12:53
【问题描述】：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script type="text/javascript">

        var moduleServiceUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getbytitle('Pages')/Items?$select=ID,Title,FileRef,Modules";
        var appVar = angular.module('listApp', []);

        appVar.controller('controller1', function ($scope, $http) {
            $http({
                method: 'GET',
                url: moduleServiceUrl,
                headers: { "Accept": "application/json;odata=verbose" }
            }).success(function (data, status, headers, config) {
                $scope.items = data.d.results;
                $scope.modules = data.d.results.reduce((modules, item) => {
                    if (item.Modules) {
                        if (Array.isArray(modules[item.Modules])) {
                            modules[item.Modules].push(item);
                        } else {
                            modules[item.Modules] = [item];
                        }
                    }
                    return modules;
                }, Object.create(null));

            });
        })
    </script>

</head>
<body>
    <hr />
    <div ng-app="listApp">
        <div id="App1" ng-controller="controller1">
            <div ng-repeat="(module, items) in modules">
                <p><strong>{{module}}</strong></p>
                <p ng-repeat="item in items" style="padding-left:10px;">
                    <a ng-href="{{item.FileRef}}">{{item.Title}}</a>
                </p>
            </div>

        </div>
    </div>

</body>
</html>

IE is showing this error: [$injector:modulerr]

IE 也说“$scope 未定义”，尽管它是函数的参数。

这个问题令人困惑，因为代码在 chrome 中运行良好。

【问题讨论】：

这就是为什么我认为客户端 JavaScript 框架是一个糟糕的想法。浏览器地狱。

标签： angularjs google-chrome internet-explorer

【解决方案1】：

你可以使用angularJS推荐的内联数组注解。

appVar.controller('controller1', ['$scope', '$http', function ($scope, $http) {
      //Codes          
     }])

【讨论】：

【解决方案2】：

当你进行依赖注入时，你应该传递一个字符串数组来描述进入控制器函数的参数。

1. Angular 最佳实践：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#data-services

appVar.controller('controller1', controller1);
controller1.$inject = ['$scope', '$http'];
function controller1($scope, $http) {
     // controller code
}

2.默认角度模式：https://docs.angularjs.org/guide/controller

appVar.controller('controller1', ['$scope', '$http', function ($scope, $http) {
     // controller code
}])

【讨论】：

【解决方案3】：

很可能由于reduce function 中使用了Arrow notation 而发生此错误。 IE 不支持箭头符号（ES6 功能），请关注Browser Compatibility table 了解更多详情。

为了使其与 IE 兼容，将箭头函数语法 (=>) 替换为函数回调语法：

$scope.modules = data.d.results.reduce(function(modules, item){
     if (item.Modules) {
            if (Array.isArray(modules[item.Modules])) {
                 modules[item.Modules].push(item);
            } else {
                 modules[item.Modules] = [item];
            }
     }
     return modules;
}, {});

【讨论】：