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

我有上面的AngularJS，当我运行我的页面时，Console.Log显示[cycle] terminating; too few slides: 0，然后显示Get Request之后。

$http.get完成后，我怎样才能运行指令？

Answer 1

尝试这样做

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

这种方式包含指令的元素只有在饮料可用时才会在浏览器中编译

Answer 2

您可以使用两件事

ng-cloak
ng-show和ng-hide以及自定义scope属性

另请考虑使用animation而不是在指令

中创建手动动画

一旦$ http结束，AngularJS启用指令

2 个答案: