AngularJS enable directive once $http get finishes

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

I have the above AngularJS and when I run my page the Console.Log shows [cycle] terminating; too few slides: 0 and then it shows the Get Request after.

How would I be able to run the directive once the $http.get has finished?

maurycy · Accepted Answer · 2014-06-03 14:01:08Z

1

try doing this

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

that way element that contains directive will be compiled in browser only when the drinks are available

answered Jun 3, 2014 at 14:01

maurycy

8,4201 gold badge30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vittore · Accepted Answer · 2014-06-03 13:56:43Z

0

There are two things you can use

ng-cloak
ng-show and ng-hide and custom scope property

Also consider using animation instead of creating manual animation within directive

answered Jun 3, 2014 at 13:56

vittore

17.6k6 gold badges46 silver badges84 bronze badges

1 Comment

ngplayground Over a year ago

The problem is that the directive is running right away. How would this work when there is no data?

Collectives™ on Stack Overflow

AngularJS enable directive once $http get finishes

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related