AngularJS active la directive une fois que $http est terminé

Question

app.controller("MainController", function($scope, $http){
    $scope.items= [];
    console.log('hi');
    $http.get('../assets/data/data.json').then(function(response) {
        $scope.drinks =response.data.drinks;
    });
});

app.directive('cycle', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
           $(element).cycle({
               fx: 'fade',
               timeout: 10
           });
        }
    };
});

J'ai l'AngularJS ci-dessus et lorsque j'exécute ma page, le Console.Log affiche [cycle] terminating; too few slides: 0 et puis il montre le Get Request après.

Comment pourrais-je exécuter la directive une fois que le $http.get avoir fini?

Answer 1

essaie de faire ça

<div cycle ng-if="drinks"></div>

de cette façon, l'élément contenant la directive sera compilé dans le navigateur uniquement lorsque les boissons seront disponibles

Answer 2

Il y a deux choses que vous pouvez utiliser

• ng-cloak

• ng-show et ng-hide et personnalisé scope propriété

Pensez également à utiliser animation au lieu de créer une animation manuelle dans la directive