webentwicklung-frage-antwort-db.com.de

Warten Sie auf Daten im Controller, bevor die Link-Funktion in der AngularJS-Direktive ausgeführt wird

Wie kann ich sicherstellen, dass Daten von einer Steuerung in eine Direktive geladen wurden, bevor die Link-Funktion ausgeführt wird?

Mit Pseudo-Code könnte ich Folgendes haben:

<my-map id="map-canvas" class="map-canvas"></my-map>

für meine HTML.

In meiner Anweisung könnte ich so etwas haben:

app.directive('myMap', [function() {



return{
    restrict: 'AE',
    template: '<div></div>',
    replace: true,
    controller: function ($scope, PathService) {

        $scope.paths = [];

        PathService.getPaths().then(function(data){
            $scope.paths = data;

        });

    },
    link: function(scope, element, attrs){
        console.log($scope.paths.length);

    }

}


}]);

Das obige funktioniert nicht, weil console.log ($ scope.paths.length); wird aufgerufen, bevor der Dienst Daten zurückgegeben hat.

Ich weiß, dass ich den Dienst über die Verknüpfungsfunktion aufrufen kann, möchte jedoch wissen, ob es eine Möglichkeit gibt, auf den Dienstanruf zu warten, bevor die Verknüpfungsfunktion ausgelöst wird.

26
James Brunet

Die einfachste Lösung wäre die Verwendung von ng-if, da das Element und die Direktive nur gerendert werden, wenn der ng-if als wahr aufgelöst wird

<my-map id="map-canvas" class="map-canvas" ng-if="dataHasLoaded"></my-map>

app.controller('MyCtrl', function($scope, service){
  $scope.dataHasLoaded = false;

  service.loadData().then(
    function (data) {
      //doSomethingAmazing
      $scope.dataHasLoaded = true
    }
  )
})

oder versprechen

return {
  restrict: 'AE',
  template: '<div></div>',
  replace: true,
  controller: function ($scope, PathService) {
    $scope.paths = [];
    $scope.servicePromise = PathService.getPaths()
  },
  link: function (scope, element, attrs) {
    scope.servicePromise.then(function (data) {
      scope.paths = data;
      console.log(scope.paths)
    });
  }
}
43
maurycy
app.directive('MyDirective', function() {
    return {
        controller: function() {
            this.$postLink = function() {
                // here will run after the link function and also after the binding came in
            };
        },
        controllerAs: 'vm'
    };
});

check out the angle 1.5 Die Komponenten haben einen genau definierten Lebenszyklus und funktionieren nach Anweisungen 

0