javascript - 如何使用请求回调函数内部的 Angular 创建表

Question

我正在尝试使用 Angular 创建一个表格。问题是我需要根据 http 请求的 JSON 响应创建该表(此时我调用下面的 responseHandler 函数:

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

这是我的 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>

我不断收到 angular.js:14516 Error: [$controller:ctrlreg] 错误。 所以看来我的 Controller 没有被 Angular 识别。有什么想法吗？

谢谢!

Answer 1

如果您正在使用 Angular，您应该完全停止使用 JQuery，由于 Angular 的摘要循环，异步 Ajax 调用会严重扰乱您的应用程序。

将数据获取拆分到不同的服务中也是一种最佳实践，因为它有时会很快变得困惑，并且会用大量没有应用程序逻辑的代码污染 Controller 。

并且因为您不使用 JQuery，所以不需要将 ID 放置在元素中。

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