Scope.attribute available but scope.attribute.variable undefined in directive

Question

I'm trying some angularJS development, but I'm facing a issue that I do not understand at all.

I try to format a JSON into a specific table with many rules. For now my JSON look like:

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

it is loaded into 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
        }
    ]);

then I try to rearrange data with :

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

and for now a simple directive:

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

but here what happen in console.log() : I have 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

I have scope.list (marked as Resource):

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

but scope.list.title is marked as undefined.

My search lead to some attribute which may not have been set at link, but why the scope.list is still available and not its property ?

I've also tried to set the scope to true into table directive, but nothing better happen

I'm about to make a complexe table so I have to apply very specific rules within this div and table. I can't do it simply with some ng-If.

Answer 1

$scope.list is a promise. In your case the promise has already been resolved, thus the $resolved: true. But it's a promise none the less.

From the ngResource docs:

$promise: the promise of the original server interaction that created this instance or collection.

On success, the promise is resolved with the same resource instance or collection object, updated with data from server. This makes it easy to use in resolve section of $routeProvider.when() to defer view rendering until the resource(s) are loaded.

So in Angular 1.2+ you want to do something like this where you provide a callback using then on the $promise attribute of the promise. Once the promise is resolved the callback will then be called with the results (in your case since the promise is already resolved the callback will execute immediately).

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

Here's a working demo fiddle that uses $httpbackend to simulate your server's response.