Ich habe ein Problem mit benutzerdefinierten Anweisungen, das mich verrückt macht. Ich versuche die folgende benutzerdefinierte (Attribut) Direktive zu erstellen:

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

Diese "attribute-type" -Direktive ("seatMap" genannt) versucht, eine Liste von Sitzplatz-IDs (z. B. für ein Theater) anzuzeigen, die ich über $ resource service (siehe Code unten) vom Server in ein div (-Element) abrufen werde. .

Ich benutze es mit diesem einfachen Teil-HTML:

<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>

Und das ist der Controller, der den Scope lädt:

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

Wobei "Seats" ein einfacher Dienst ist, der $ resources verwendet, um eine JSON vom Server abzurufen

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

app.js (asientos_libres.html ist der Teil, den ich verwendet habe):

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

Das Problem ist, dass ich in der Linkfunktion der Direktive ein "scope. $ Watch" eingerichtet habe, damit der Bereich prüfen kann, ob sich das Attribut "seats" geändert hat, um die Liste der IDs zu aktualisieren Moment $ scope.seats ändert sich in der Steuerung (wenn wir "query" aufrufen).

Wie Sie vielleicht im Code sehen, habe ich versucht, mit $ timeout den Start von "updateSeatInfo" zu verzögern, aber ich fürchte, es ist bei weitem nicht die intelligenteste Lösung ...

Ich habe auch versucht, keine JSON-Anfrage zu stellen, sondern ein fest codiertes Wörterbuch in $ scope.seats zu verwenden, und es funktioniert, es scheint also eine Frage der Synchronität zu sein.

Hinweis: Die updateSeatInfo ist nur eine Testfunktion, die eigentliche Funktion, die ich verwende, ist etwas komplexer.

Irgendeine Idee, wie man damit umgeht?

Vielen Dank im Voraus!

Bearbeiten 1: App.js hinzugefügt, wo ich den Router verwende, um SeatsCtrl aufzurufen, danke Supr für den Rat. Ich habe jedoch immer noch das gleiche Problem.

Edit 2: Gelöst! (?) OK! Anscheinend habe ich eine Lösung gefunden, die vielleicht nicht die beste ist, aber richtig funktioniert! :) Soweit ich hier sehen konntehttp://docs.angularjs.org/api/ng.$timeoutkönnen wir $ timeout verwenden (ein Wrapper über setTimeout)ohne Verzögerung! Das ist großartig, weil wir die Ausführung unseres Codes innerhalb von $ timeout nicht künstlich verzögern, sondern die Anweisung festlegen, ihn erst auszuführen, wenn die asynchrone Anforderung abgeschlossen ist.

Hoffe, es wird auch für lange Wartezeiten funktionieren ...

Wenn jemand einen besseren Weg kennt, um das Problem zu beheben, sagen Sie es bitte!