Question

我正在使用API将（Data）加载到我的$ scope资源，并且我从在线指令中获取了一个示例来创建树视图。 Recursive Tree View Example

但是我正在改变一些事情来从API加载数据。请注意评论数据...当我取消注释我的数据时，一切都很好，但是当我使用$scope.treeFamily = TreeView.query()时，我认为指令执行和我没有数据之间存在延迟。任何见解都会有所帮助。谢谢！

    var module = angular.module("module", ["ngResource", "ngRoute"]);

    module.factory('TreeView', function ($resource) {
        return $resource('/api/TreeView/:Id', {}, {
            //show: { method: 'GET', isArray: true },  //<--- need to do query instead of show.... 
            query: { method: 'GET', isArray: false},
            update: { method: 'PUT', params: { id: '@id' } },
            delete: { method: 'DELETE', params: { id: '@id' } }
        })
    });

    module.controller('TreeCtrl', function ($scope, TreeView) {

        $scope.treeFamily = TreeView.query();

        //$scope.treeFamily = {
        //    name: "Parent",
        //    children: [{
        //        name: "Child1",
        //        children: [{
        //            name: "Grandchild1",
        //            children: []
        //        }, {
        //            name: "Grandchild2",
        //            children: []
        //        }, {
        //            name: "Grandchild3",
        //            children: []
        //        }]
        //    }, {
        //        name: "Child2",
        //        children: []
        //    }]
        //};
    });

    module.factory('RecursionHelper', ['$compile', function ($compile) {
        var RecursionHelper = {
            compile: function (element) {
                var contents = element.contents().remove();
                var compiledContents;
                return function (scope, element) {
                    if (!compiledContents) {
                        compiledContents = $compile(contents);
                    }
                    compiledContents(scope, function (clone) {
                        element.append(clone);
                    });
                };
            }
        };

        return RecursionHelper;
    }]);

    module.directive("tree", function (RecursionHelper) {
        return {
            restrict: "E",
            scope: { family: '=' },
            template:
                '<p>{{ family.name }}</p>' +
                '<ul>' +
                    '<li ng-repeat="child in family.children">' +
                        '<tree family="child"></tree>' +
                    '</li>' +
                '</ul>',
            compile: function (element) {
                return RecursionHelper.compile(element);
            }
        };
    });

使用以下HTML获得的结果。

    <!DOCTYPE html>
<html lang="en" ng-app="module">
<head>
    <title></title>
</head>
<body>

    <div class="container">
        <div ng-controller="TreeCtrl">
            <table>
                <tr>
                    <th>Name</th>
                </tr>
                <tr ng-repeat="result in treeFamily">
                    <td> From Table: {{result.name}}</td>
                </tr>

            </table>

            <tree family="treeFamily"></tree>
        </div>
        <div ng-view=""></div>
    </div>

结果： 名称来自表：父

但是，这是来自我表中的ng-repeat，所以我知道API正在发送DATA并且它是可读的。

{
ID: "1",
type: "Folder",
name: "Parent",
children: []
}

问题是该指令似乎没有加载这些数据....但是如果取消注释我对该范围的内置数据它可以正常工作......

我感觉我的指令加载速度比API调用快，所以我没有数据。我做错了吗？

任何帮助将不胜感激！

其他研究......

$ scope.treeFamily = {＆＃34; ID＆＃34;：＆＃34; 1＆＃34;，＆＃34; type＆＃34;：＆＃34; Folder＆＃34;，＆＃34; name＆＃34;：＆＃34;收获＆＃34;，＆＃34;孩子＆＃34;：null}; $ scope.treeFamily = [{＆＃34; ID＆＃34;：＆＃34; 1＆＃34;，＆＃34; type＆＃34;：＆＃34; Folder＆＃34;，＆＃34; name＆＃34 ;：＆＃34;收获＆＃34;，＆＃34;孩子＆＃34;：null}];

这是差异.....

如果我尝试进行ng-repeat $ scope.treeFamily = {＆＃34; ID＆＃34;：＆＃34; 1＆＃34;，＆＃34; type＆＃34;：＆＃34; Folder＆＃34;，＆＃34; name＆＃34; ：＆＃34; Harvest＆＃34;，＆＃34; children＆＃34;：null};

它不会起作用，因为它期待一个物体[...] $ scope.treeFamily = [{＆＃34; ID＆＃34;：＆＃34; 1＆＃34;，＆＃34; type＆＃34;：＆＃34; Folder＆＃34;，＆＃34; name＆＃34 ;：＆＃34; Harvest＆＃34;，＆＃34; children＆＃34;：null}]; 因此，上述方法将起作用。

然而，当使用递归树时，看起来好像没有EXPECT来看到除了孩子之外的对象......因此

$ scope.treeFamily = [{＆＃34; ID＆＃34;：＆＃34; 1＆＃34;，＆＃34; type＆＃34;：＆＃34; Folder＆＃34;，＆＃34; name＆＃34;：＆＃34; Harvest＆＃34;，＆＃34; children＆＃34;：null}];

会失败......

但是，我改变了我的API以返回如下： {＆＃34; ID＆＃34;：＆＃34; 1＆＃34;，＆＃34;输入＆＃34;：＆＃34;文件夹＆＃34;，＆＃34;名称＆＃34;：＆＃34;收获＆＃34;，＆＃34;孩子＆＃34;：null} 它仍然无法工作!!!!!

Answer 1

我认为订单不重要。因为在the documentation of $resource中它说：

重要的是要意识到调用$ resource对象方法会立即返回一个空引用（对象或数组，具体取决于isArray）。从服务器返回数据后，将使用实际数据填充现有引用。这是一个有用的技巧，因为通常将资源分配给模型，然后由视图呈现。具有空对象导致无渲染，一旦数据从服务器到达，则对象用数据填充，并且视图自动重新呈现其自身显示新数据。这意味着在大多数情况下，永远不必为动作方法编写回调函数。

您确定从服务器返回数据吗？

Answer 2

这可能是一个Angular版本问题。自动承诺展开是removed in version 1.2。将代码更改为：

var treeFamily = TreeView.query(function(){
    $scope.treeFamily = treeFamily;
});

或使用更明确的promise语法：

TreeView.query().$promise.then(function(treeFamily){
    $scope.treeFamily = treeFamily;
});

Angular JS $ scope $ resource＆amp;指令 - 指令加载速度超出范围，因此无法查看数据

2 个答案: