Question

<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也表示＆＃34; $范围未定义＆＃34;虽然它是函数的参数。

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

Answer 1

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

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
}])

Answer 2

您可以使用angularJS推荐的内联数组注释。

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

Answer 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;
}, {});

Angular - 适用于Chrome但不适用于IE的应用

3 个答案: