angularJS 1.4.0 参数'MainController'不是函数，未定义

Question

 (function () {
    var app = angular.module("Sports", []);
    var MainController = function($scope, $http) {
        var onUser = function (response) {
            obj = JSON.parse(response);
            $scope.sport = angular.fromJson(obj);
        };

        $http.get("/api/SportApi/Get").success(function (response) {
            obj = JSON.parse(response);
            $scope.sport = angular.fromJson(obj);
        });
    };
    app.controller("MainController", ["$scope", "$http", MainController]);
}());

所以是的，这个脚本不起作用，得到错误它找不到"主控制器作为功能"有什么问题？

编辑：错误原因在此函数中：

 function consoleLog(type) {
  var console = $window.console || {},
      logFn = console[type] || console.log || noop,
      hasApply = false;
  // Note: reading logFn.apply throws an error in IE11 in IE8 document mode.
  // The reason behind this is that console.log has type "object" in IE8...
  try {
    hasApply = !!logFn.apply;
  } catch (e) {}
  if (hasApply) {
    return function() {
      var args = [];
      forEach(arguments, function(arg) {
        args.push(formatError(arg));
      });
      return logFn.apply(console, args); //throws exception
    };
  }

Answer 1

修复了你的小提琴。可能，问题出在直接功能上。还固定ng-app和响应处理

.HTML

<div ng-app="Sports"> 
    <div ng-controller="MainController">
        <table class="table table-striped table-hover">
            <thead>Sport</thead>
            <tr ng-repeat="x in sport">
                {{sport}}
            </tr>
        </table>
    </div>
</div>

.JS

angular
    .module("Sports", [])
    .controller("MainController", ["$scope", "$http", function($scope, $http) {
        $http.get("https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699")
            .success(function (response) {
                console.log(response);
                $scope.sport = response.items;
            });
    }]);

更新

Plunker version for AngularJS v1.3.x

Answer 2

顺序很重要：-

 app.controller("MainController", MainController);
    var MainController = function($scope, $http) {
            var onUser = function (response) {
                obj = JSON.parse(response);
                $scope.sport = angular.fromJson(obj);
            };

            $http.get("/api/SportApi/Get").success(function (response) {
                obj = JSON.parse(response);
                $scope.sport = angular.fromJson(obj);
            });
        };
    MainController.$inject = ['$scope','$http'];

Answer 3

这是工作小提琴，它只是一个基本，因为我想你在找到控制器时遇到问题......希望对您有所帮助 链接

(function(){
    var app = angular.module("sports",[]);
    app.controller("MainController", function($scope){
    this.msg = 'Hello World';
    });
})();

我想你已经搞砸了闭包（括号定义JS中的自调用函数），我已经纠正了。

并遵循Angular Docs提出的定义结构。

Answer 4

对于 angularjs v1.4.x，success 和 error 方法现已弃用

 // Simple GET request example :
$http.get('/someUrl').
  then(function(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

then()方法是已弃用的方法success()的替代

Github参考链接

API 参考链接