2

我正在尝试一些 angularJS 开发，但我遇到了一个我根本不理解的问题。

我尝试将 JSON 格式化为具有许多规则的特定表。现在我的 JSON 看起来像：

{
    "id":"test",
    "title":"Test Sample",
    "description":"Test Sample Description"
}

它被加载到list：

angular.module('myServices', ['ngResource'])
   .factory('MyData', ['$resource',
       function($resource){
        return $resource('/rest/data', {}, {
            getSample: {method:'GET', url:'/data/sample.json', isArray:false}               
        });
       }
    ]);

angular.module('myControllers', ['myServices'])
    .controller('DataController', ['$scope', 'MyData',
        function($scope, MyData){
            $scope.list = MyData.getSample(); //retrive a simple JSON
        }
    ]);

然后我尝试重新排列数据：

<div id="list" data-ng-controller="DataController">   
    <div data-table="view" data-list="list"></div>
</div>

现在是一个简单的指令：

angular.module('myDirectives', [])
   .directives('table', function($timeout){
        return {
            restrict: 'A',
            replace: true,
            scope: { list : '='},
            link: function(scope,$element, attrs){
                console.log(scope);
                console.log(scope.list);
                console.log(scope.list.title);
            }
        };
    });

但这里发生了什么console.log()：我有scope：

$$asyncQueue: Array[0]
$$childHead: null
$$childTail: null
$$destroyed: false
$$isolateBindings: Object
$$listeners: Object
$$nextSibling: null
$$phase: null
$$postDigestQueue: Array[0]
$$prevSibling: null
$$watchers: Array[1]
$id: "007"
$parent: a
$root: h
list: Resource
this: h
__proto__: h

我有scope.list（标记为Resource）：

$promise: Object
$resolved: true
description: "Test Sample Description"
id: "test"
title: "Test Sample"
__proto__: Resource

但scope.list.title被标记为undefined。

我的搜索导致某些属性可能尚未在链接中设置，但为什么scope.list仍然可用而不是它的属性？

我也尝试将 to 设置为scope指令，但没有更好的事情发生truetable

我即将制作一个复杂的表格，所以我必须在这个 div 和表格中应用非常具体的规则。我不能简单地用一些ng-If.

4

1 回答 1

1

$scope.list是一个承诺。在您的情况下，承诺已经解决，因此$resolved: true. 但这仍然是一个承诺。

来自ngResource 文档：

$promise：创建此实例或集合的原始服务器交互的承诺。

成功后，promise 将使用相同的资源实例或集合对象解析，并使用来自服务器的数据进行更新。这使得在 $routeProvider.when() 的 resolve 部分中很容易使用来延迟视图渲染，直到加载资源。

因此，在 Angular 1.2+ 中，您想要执行类似的操作，使用 Promisethen的$promise属性提供回调。一旦承诺被解决，回调将被调用结果（在你的情况下，因为承诺已经解决，回调将立即执行）。

link: function(scope,$element, attrs){
         scope.list.$promise.then(function(results) {
            console.log(results);
            console.log("title ",results.title);
         });
      }

这是一个使用 $httpbackend 来模拟服务器响应的工作演示小提琴。

于 2014-01-02T01:06:32.160 回答