如何使用内部请求回调函数中的angular创建表

Question

I'm trying to create a table using angular. The problem is that I need to create that table based on JSON response from my http request (at which point I call the responseHandler function below:

function call(){
    $.ajax({
        url: url
        , type: "GET"
        , success: function (response, status, xhr) {

            responseHandler(response);
        }
        , error: function (xhr, status, error) {}
    });
}

 function responseHandler(response) {
    var data = angular.fromJson(response);
    var user = angular.fromJson(data['users']);
    userdata = user['data'];// this is correctly assigning the data I 
                                // need to the variable userdata
    var tApp = angular.module('tApp', []);
    tApp.controller('tCtrl', ['$scope', function ($scope) {

        $scope.userdata = userdata;
        $("#usertable").css("visibility", "visible");
    }]);
 }

Here is my html:

<div ng-app="tApp" ng-controller="tCtrl" class="tab-content clearfix" id='tCtrl'>
<table id='usertable' border="1">
                        <tr ng-repeat="x in userdata">
                            <td>{{x.name}}</td>
                            <td>{{x.id}}</td>
                            <td>{{x.picture.data.url}}</td>
                        </tr>
                    </table>
</div>

I keep getting the angular.js:14516 Error: [$controller:ctrlreg] error. So it seems my controller is not being recognize by angular. Any ideas?

Thank you!

Answer 1

Looks like your angular module and controller are declared only on success. But you are using ng-controller in your view. So if the request fails, you're in trouble :)

When AngularJS sees an ng-controller directive, but cannot find the matching controller, it throws that error. Here is more info on the error

But in general, there are issues with your code:

1. you should use angular's $http module to make http calls. You should not use jquery because it will not trigger a digest cycle once a response is received and angular will not know anything about the api call.

2. you should not create your angular module inside another function, just create it globally

Answer 2

If you are using angular, you should completely stop using JQuery, the asynchronous ajax call will mess up your application really hard because of angular's digest loop.

It's also a best practice to split the data-fetching into a different service, as it sometimes gets messy really fast and pollutes the controllers with a lot of code without application logic.

And because you don't use JQuery, you don't need to place ID in elements.

HTML:

<div ng-app="tApp" ng-controller="tCtrl" class="tab-content clearfix">
  <table border="1" ng-show="userdata.length > 0">
    <tr ng-repeat="x in userdata">
      <td>{{x.name}}</td>
      <td>{{x.id}}</td>
      <td>{{x.picture.data.url}}</td>
    </tr>
  </table>
</div>

Javascript

var tApp = angular.module('tApp', []);

tApp.factory('dataFetchingService', ['$http', function ($http) {
  return {
    getUserData: function() {
      $http.get('/someUrl/to/userData')
        .then(
          response => response.data,
          error => console.error(error)
        );
    }
  };
}]);

tApp.controller('tCtrl', ['$scope', 'dataFetchingService', function ($scope, dataFetchingService) {
    $scope.userdata = [];

    dataFetchingService.getUserData().then(userData => {
      $scope.userdata = userData;
    });
}]);