AngularJS - 无法获得AJAX请求

I'm new to Angular (few hours new). I'm getting pretty much what I want, by adjusting the demo. But i can't get my AJAX request to work.

我是Angular的新手(几个小时新)。通过调整演示,我得到了我想要的东西。但我无法让我的AJAX请求工作。

I tried various solutions, but on gets in an endless loop (figured out that's the way how Angular works). In an other solution nothing really happens..

我尝试了各种解决方案,但是进入无限循环(想象出Angular的工作方式)。在另一个解决方案中没有真正发生..

My current solution (tried to place the peopleController about everywhere):

我目前的解决方案(尝试将peopleController放在任何地方):

Controller:

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>

But it gives me this error:

但它给了我这个错误:

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

Hope someone can help me out here :)

希望有人可以帮助我:)

4 个解决方案

#1

If you want a separate controller called peopleController you need to define it separately as follows:

如果你想要一个名为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.
          });
        } 
 }]);

#2

match the controller name in your html and js file, if it's 'peopleController' in you html file name it 'peopleController' in the controller rather than 'MainController'.

匹配你的html和js文件中的控制器名称,如果你的html文件名中的'peopleController'是控制器中的'peopleController',而不是'MainController'。

than change the line

比改变线

function peopleController($scope,$http){

function peopleController(){

you use dependency injection in the controller function, not on the contained functions, the contained function already have access to $something because they are under the controller function's scope

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

#3

Your view must refer to the controller you declared, which is MainController:

您的视图必须引用您声明的控制器,即MainController:

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

Inside your controller, set people to [] and bound to $scope, remove the parameters you passed in peopleController and initiate the request. Caution: in the success handler, rename scope to $scope.

在控制器内部,将people设置为[]并绑定到$ scope,删除在peopleController中传递的参数并启动请求。警告:在成功处理程序中,将范围重命名为$ 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() is misleading; its purpose is to get data. I'd recommend to rename it to getPeople().

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

#4

You need to remove $scope and $http from peopleController function which are overriding the existence of $http &amp; $scope

你需要从peopleController函数中删除$ scope和$ http,它们会覆盖$ http& amp;的存在。 $范围

Other thing you should mention ng-controller='MainController' instead of ng-controller='peopleController'

其他的事情你应该提到ng-controller ='MainController'而不是ng-controller ='peopleController'

Also change the name peopleController to getPeople. I'm assuming that you want function there instead of controller.

还将名称peopleController更改为getPeople。我假设你想要那里的功能而不是控制器。

#1