AngularJS-无法获得AJAX请求

Question

我是Angular新手（几个小时来了）。 通过调整演示，我得到了我想要的东西。 但是我无法获得我的AJAX请求。

我尝试了各种解决方案，但是却陷入了无休止的循环（原来这就是Angular工作方式）。 在其他解决方案中，什么也没有发生。

我当前的解决方案（试图将peopleController各处）：

控制器：

app.controller('MainController', ['$scope','$http', function($scope,$http) {
    //$http is working in this

    var scrollItems = [];

    for (var i=1; i<=100; i++) {
        scrollItems.push('Item ' + i);
    }

    $scope.scrollItems = scrollItems;    


    function peopleController($scope,$http){
        // Simple GET request example :
        $http.get('/public/ajax.php').
        success(function(data, status, headers, config) {
            console.log("worked");
            // this callback will be called asynchronously
            // when the response is available
            scope.people = data;
            }).error(function(data, status, headers, config) {
                console.log("fail");          
                // called asynchronously if an error occurs
                // or server returns response with an error status.
            });
     }          
}]);

HTML：

<div ng-controller="peopleController">
     {{people}}
</div>

但这给了我这个错误：

Error: [ng:areq] http://errors.angularjs.org/1.3.0/ng/areq?p0=peopleController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:6:416
    at Mb (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:19:510)
    at nb (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:20:78)
    at $get (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:74:494)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:56:415
    at r (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:7:408)
    at M (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:56:281)
    at g (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:51:201)
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js:50:309

希望有人可以在这里帮助我:)

我尝试过的其他解决方案

Answer 1

与html和js文件中的控制器名称匹配，如果html文件名中的控制器名称为“ peopleController”，则控制器中的控制器名称为“ peopleController”，而不是“ MainController”。

比换线

function peopleController($scope,$http){

至

function peopleController(){

您在控制器函数中而不是在包含的函数上使用依赖项注入，包含的函数已经可以访问$ something，因为它们在控制器函数的范围内

Answer 2

您的view必须引用您声明的控制器，即MainController ：

<div ng-controller="MainController">
        {{people}}
</div>

在controller内部，将people设置为[]并绑定到$scope ，删除在peopleController传递的参数并启动请求。 警告：在成功处理程序中，将scope重命名为$scope 。

$scope.people = [];

peopleController(); //initiate your ajax request

function peopleController(){ //remove the parameters
        // Simple GET request example :
        $http.get('/public/ajax.php').
          success(function(data, status, headers, config) {
          console.log("worked");
            // this callback will be called asynchronously
            // when the response is available
            $scope.people = data; //scope -> $scope
      }).
      error(function(data, status, headers, config) {
      console.log("fail");        
        // called asynchronously if an error occurs
        // or server returns response with an error status.
      });
    }     

peopleController()具有误导性； 它的目的是获取数据。 我建议将其重命名为getPeople() 。

Answer 3

您需要从peopleController函数中删除$ scope和$ http， peopleController函数覆盖了$ http＆amp; amp;的存在。 $范围

您还应该提到ng-controller='MainController'而不是ng-controller='peopleController'

还要将名称peopleController更改为getPeople 。 我假设您要在那里使用功能而不是控制器。

Answer 4

如果要使用一个名为peopleController的单独控制器，则需要按以下方式单独定义它：

app.controller('MainController', ['$scope','$http', function($scope,$http) {
      //$http is working in this

      var scrollItems = [];

      for (var i=1; i<=100; i++) {
        scrollItems.push('Item ' + i);
      }

      $scope.scrollItems = scrollItems;    



 }]);

 app.controller('peopleController', ['$scope','$http', function ($scope,$http){
        // Simple GET request example :
        $http.get('/public/ajax.php').
          success(function(data, status, headers, config) {
          console.log("worked");
            // this callback will be called asynchronously
            // when the response is available
            $scope.people = data;
          }).
          error(function(data, status, headers, config) {
          console.log("fail");        
            // called asynchronously if an error occurs
            // or server returns response with an error status.
          });
        } 
 }]);