javascript - ng-repeat 不打印任何内容

Question

我有以下情况:

app.controller('ResourceController', function($scope, $sce){
        var resourceData;
        $scope.data = '';
        $scope.loadResources = function(){
            $.get('controllers/getResources.php', function(result){
                console.log(result);
                resourceData = $.parseJSON(result);
                $scope.data = $sce.parseAsHtml(resourceData);
            });
        };
        $scope.loadResources();
    });

上面的 Controller 向服务器发出请求，以便它可以加载所有资源并将它们发布到 html 表上。

这是 console.log(result) 的结果:

[{"ID":"123","NAME":"Proyector Epson CX2435","DESCRIPTION":"Proyector Epson comprado en 2009.","STATUS":"Active","STATUS_DESCRIPTION":"Can be reserved.","LOCATION":"Elementary"},{"ID":"456","NAME":"Rack con Televisor #1","DESCRIPTION":"Televisor Sharp Aquos con Laptop, armado en 2011.","STATUS":"Active","STATUS_DESCRIPTION":"Can be reserved.","LOCATION":"First Floor, High School"}] 

这是一个很大的 JSON，数据就在那里，很好。

在 HTML 中，这就是我正在做的事情:

<div class="container-fluid" ng-controller="ResourceController as resource">
   .....
      <tbody>
            <tr ng-repeat="resourceInfo in data">
                <td>{{resourceInfo.ID}}</td>
                <td>{{resourceInfo.NAME}}</td>
                <td>{{resourceInfo.DESCRIPTION}}</td>
                <td>{{resourceInfo.STATUS}}</td>
                <td>{{resourceInfo.STATUS_DESCRIPTION}}</td>
                <td>{{resourceInfo.LOCATION}}</td>
                <td>
                    <a class="btn btn-danger" data-toggle="modal" data-target="#delete-prompt">Delete</a>
                    <button class="btn btn-info" data-toggle="modal" data-target="#update-form">Update</button>
                </td>
            </tr>
        </tbody>

当我打开 Chrome 开发工具时，重复的位置会出现以下内容:

这让我觉得出了什么问题，但我无法诚实地弄清楚到底出了什么问题。

编辑

我刚刚将 Controller 更改为以下内容:

app.controller('ResourceController', function($scope, $sce){
        $scope.data = '';
        $scope.loadResources = function(){
            $.get('controllers/getResources.php', function(result){
                console.log(result);
                $scope.data = $.parseJSON(result);
                console.log($scope.data);
                console.log($scope.data[0].ID);
            });
        };
        $scope.loadResources();
    });

console.log($scope.data[0].ID) 打印 '123'。我不明白这一点，我认为这是 JSON 格式，因为我确实将其解析为 JSON，但是当我尝试在 HTML 上打印它时，它只是没有被打印。

Answer 1

问题:

这可能是因为您使用 jQuery 而不是 Angular 加载数据。由于数据是异步加载的，Angular 不知道它们在那里，因此它不会更新 View 。

解决方案:

1. 尽可能多地使用 Angular 方法，以便 Angular 自动知道发生了什么。
   在您的情况下，$http 服务和 Angular 的 fromJson() 方法 (angular.fromJson(...)) 应该可以完成这项工作。

2. 如果必须使用非Angular方法，则需要显式告知Angular需要重新检查，手动触发$digesr循环:

   $.get('controllers/getResources.php', 函数 (结果) { ... $scope.data = $.parseJSON(结果); $scope.$apply();});

...或者更好:

$.get('controllers/getResources.php', function (result) {
    $scope.$apply(function () {
        ...
        $scope.data = $.parseJSON(result);
    });
});