Tengo un problema con las directivas personalizadas que me están volviendo loco. Estoy tratando de crear la siguiente directiva personalizada (atributo):

angular.module('componentes', [])
    .directive("seatMap", function (){
        return {
            restrict: 'A',
            link: function(scope, element, attrs, controller){

                function updateSeatInfo(scope, element){
                    var txt = "";
                    for (var i in scope.seats)
                        txt = txt + scope.seats[i].id + " ";
                    $(element).text("seat ids: "+txt);
                }

                /* 
                    // This is working, but it's kind of dirty...
                    $timeout(function(){updateSeatInfo(scope,element);}, 1000);
                */

                scope.$watch('seats', function(newval, oldval){
                    console.log(newval, oldval);
                    updateSeatInfo(scope,element);
                });
            }
        }
    });

Esta directiva de "tipo de atributo" (llamada mapa de asiento) está tratando de mostrar una lista de identificadores de asiento (por ejemplo, para un teatro) que buscaré en el servidor a través del servicio de recursos de $ (vea el código a continuación) en un div (elemento) .

Lo estoy usando con este simple html parcial:

<div>
    <!-- This is actually working -->
    <ul>
        <li ng-repeat="seat in seats">{{seat.id}}</li>
    </ul>

    <!-- This is not... -->
    <div style="border: 1px dotted black" seat-map></div>
</div>

Y este es el controlador que está cargando el alcance:

function SeatsCtrl($scope, Seats) {
    $scope.sessionId = "12345";
    $scope.zoneId = "A";
    $scope.seats = Seats.query({sessionId: $scope.sessionId, zoneId: $scope.zoneId});
    $scope.max_seats = 4;
}

Donde "Seats" es un servicio simple que usa $ recursos para obtener un JSON del servidor

angular.module('myApp.services', ['ngResource'])
    .factory('Seats', function($resource){
        return $resource('json/seats-:sessionId-:zoneId.json', {}, {});
    })
;

app.js (asientos_libres.html es el parcial que he estado usando):

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'componentes']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/asientos_libres.html', controller: SeatsCtrl});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

El problema es que, aunque configuré un "scope. $ Watch" en la función de enlace de la directiva para que el alcance pueda verificar si el atributo de "asientos" ha cambiado para actualizar la lista de identificadores, no está funcionando en el El momento en que $ scope.seats está cambiando en el controlador (cuando llamamos "consulta").

Como puede ver en el código, intenté usar $ timeout para retrasar el lanzamiento de "updateSeatInfo", pero me temo que no es la solución más inteligente por mucho ...

También intenté no hacer una solicitud JSON, pero uso un diccionario codificado en $ scope.seats y funciona, por lo que parece que es una cuestión de sincronía.

Nota: updateSeatInfo es solo una función de prueba, la función real que usaré es un poco más compleja.

¿Alguna idea de cómo lidiar con eso?

Muchas gracias de antemano!

Edición 1: Se agregó app.js, donde estoy usando un enrutador para llamar a SeatsCtrl, gracias a Supr por el consejo. Sin embargo, todavía tengo el mismo problema.

Edición 2: resuelto! (?) ¡De acuerdo! Parece que encontré una solución, que puede no ser la mejor, ¡pero está funcionando correctamente! :) Por lo que pude ver aquíhttp://docs.angularjs.org/api/ng.$timeout, podemos usar $ timeout (una envoltura sobre setTimeout)sin demora! Esto es genial porque no estamos retrasando artificialmente la ejecución de nuestro código dentro de $ timeout, pero estamos haciendo la directiva de no ejecutarlo hasta que la solicitud asíncrona haya finalizado.

Espero que funcione para solicitudes de larga espera, también ...

Si alguien sabe una mejor manera de arreglarlo, por favor dígaselo!