Directiva de habilitación de AngularJS una vez que finaliza la obtención de $http

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

Tengo el AngularJS anterior y cuando ejecuto mi página se muestra Console.Log [cycle] terminating; too few slides: 0 y luego muestra el Get Request después.

¿Cómo podría ejecutar la directiva una vez que $http.get ha terminado?

Answer 1

intenta hacer esto

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

De esa manera, el elemento que contiene la directiva se compilará en el navegador solo cuando las bebidas estén disponibles.

Answer 2

Hay dos cosas que puedes usar.

• ng-cloak

• ng-show y ng-hide y personalizado scope propiedad

También considere usar animación en lugar de crear animación manual dentro de la directiva