Question

我正在尝试一些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仍然可用而不是其属性？

我还尝试将scope设置为true到table指令，但没有更好的事情发生

我要创建一个复杂的表，所以我必须在这个div和表中应用非常具体的规则。我不能仅仅使用一些ng-If来做到这一点。

Answer 1

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

来自ngResource docs：

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

成功时，使用相同的资源实例解析promise   集合对象，使用服务器中的数据更新。这很容易   在$ routeProvider.when（）的resolve部分中使用来推迟查看   渲染，直到加载资源。

因此，在Angular 1.2+中，您希望执行类似这样的操作，在promise的then属性上使用$promise提供回调。一旦解决了promise，就会调用带有结果的回调（在你的情况下，因为promise已经解决，所以回调会立即执行）。

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

这是一个使用$ httpbackend模拟服务器响应的working demo fiddle。

Scope.attribute可用，但scope.attribute.variable在指令中未定义

1 个答案: