Asynchron erhaltene Daten an eine Direktive übergeben

Question

Apr 08, 2015, 06:26 PM

angularjs-scope angularjs-directive angularjs angularjs-service

Asynchron erhaltene Daten an eine Direktive übergeben

Ich habe derzeit einen AngularJScontroller das ist im Grunde immer einigeJSON asynchron durch ein$http.get() call und dann Verknüpfen der erhaltenen Daten mit einer Bereichsvariablen.

Eine wieder aufgenommene Version descontroller code:

mapsControllers.controller('interactionsController', ['$http', function($http) {
  var ctrlModel = this;

  $http.get("data/interactionsPages.json").
  success(function(data) {
    ctrlModel.sidebar = {};
    ctrlModel.sidebar.pages = data;
  }).
  error(function() {...});
}]);

Then, ich habe eine benutzerdefiniertedirective, das dieselben Bereichsvariablen über ein @ empfänHTML Element

Eine wieder aufgenommene Version desdirective code:

mapsDirectives.directive('sidebar', function() {
  return {
    restrict : 'E',
    scope : {
      pages : '@'
    },
    controller : function($scope) {            
      $scope.firstPage = 0;

      $scope.lastPage = $scope.pages.length - 1;

      $scope.activePage = 0;

      //...
    },
    link : function(scope) {
      console.log(scope.pages);
    },
    templateURL : 'sidebar.html'
  }
});

Eine wieder aufgenommene Version desHTML:

<body>
  <div ng-controller='interactionsController as interactionsCtrl'>
    <mm-sidebar pages='{{interactionsCtrl.ctrlModel.sidebar.pages}}'>
    </mm-sidebar>
  </div>
</body>

Das Problem ist, da die$http.get() ist asynchron, die Direktive wird schlecht initialisiert (z. B .:$scope.pages.length - 1 ist nicht definiert)

Ich konnte nichts finden, das dieses Problem für mich gelöst hätte, obwohl es einige vorgestellte Lösungen gibt, die den Fall zu lösen scheinen. Ich habe nämlich versucht, die Variablen zu beobachten und sie erst nach erkannten Änderungen zu initialisieren, wie in vielen anderen Beiträgen vorgeschlagen. Zum Testen habe ich etwas verwendet wie:

//... inside the directive's return{ }
link: function() {
  scope.$watch('pages', function(pages){
    if(pages)
      console.log(pages);
  });
}

Ich habe es getestet und die $ watch-Funktion wurde nicht mehr als einmal aufgerufen (der protokollierte Wert istundefined), was, wie ich annehme, bedeutet, dass die Änderung des Variablenwerts nicht erkannt wird. Ich habe jedoch bestätigt, dass der Wert geändert wurde.

Also, was ist das Problem hier?