如何在使用异步服务器调用时使角度轮播指令工作

Question

>我创建了这个轮播指令，其中图像是随机更改的。只要同步获取幻灯片，就可以正常工作。但是，如果我想用$http异步调用调用我的 Web 服务器，如何做到这一点呢？

这是我到目前为止的代码：

        angular.module('app').controller('mainController', function($scope) {
        var slides = $scope.slides = [];
        $scope.addSlide = function () {
            var newWidth = 600 + slides.length + 1;
            slides.push({
                LogoUrl: 'http://placekitten.com/' + newWidth + '/300',
                DisplayName: ['More', 'Extra', 'Lots of', 'Surplus'][slides.length % 4] + ' ' +
                  ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
            });
        };
        for (var i = 0; i < 12; i++) {
            $scope.addSlide();
        }
    });
angular.module('app').directive("logoCarousel", function () {
    return {
        restrict: 'E',
        scope: {
            images: "=",
            interval: "=",
            showCount: "@"
        },
        templateUrl: 'template.html',
        controller: function ($scope, $timeout) {
            $scope.data = [];
            angular.copy($scope.images, $scope.data);
            var array = [];
            $scope.initMax = $scope.data.length > 12 ? 12 : ($scope.length / 2);
            function init() {
                if ($scope.showCount)
                    $scope.initMax = parseInt($scope.showCount);
                if ($scope.data && $scope.data.length > $scope.initMax)
                    $scope.initData = $scope.data.slice(0, $scope.initMax);
                else $scope.initData = $scope.data;
                for (var i = 0; i < ($scope.initMax - 1); i++)
                    array[i] = i;
            };
            $scope.run = function () {
                if ($scope.images != undefined || $scope.images.length > 0) {
                    $timeout(function () {
                        var max = $scope.data.length - 1;
                        var randomIndex = Math.ceil(Math.random() * (max + 0.4));
                        while (array.indexOf(randomIndex) >= 0) {
                            randomIndex = Math.ceil(Math.random() * (max + 0.4));
                        }
                        var newImage = $scope.images[randomIndex];
                        if (newImage) {
                            var newImageIndex = Math.floor(Math.random() * $scope.initMax);
                            var imageIdName = 'image' + newImageIndex;
                            $('#' + imageIdName).fadeOut(2000, function () {
                                $('#' + imageIdName).attr('src', newImage.LogoUrl);
                                $('#' + imageIdName).attr('alt', newImage.DisplayName);
                                $('#' + imageIdName).attr('title', newImage.DisplayName);
                                $('#' + imageIdName).fadeIn(2000);
                            });
                            array[newImageIndex] = randomIndex;
                            console.log(array.length);
                        }
                        $scope.run();
                    }, $scope.interval);
                }
            }
            init();
            $scope.run();
        }
    };
});

http://plnkr.co/edit/hvBgoRdSt1LpNMgdicly?p=preview

我知道如何在 Angular 中发出$http请求，但如果它是异步的，我的指令将在服务器响应图像之前开始运行。我想这有一些很好的模式？？

如果你在我的代码中看到一些可疑的东西，请给我一个提示，我是一个新手，正在学习我的AngularJS。

提前感谢！

Answer 1

我终于找到了答案，而且非常简单。我应该用不同的措辞来表达这个问题，也许？像这样：当服务在 AngularJS 中的控制器中完成加载时，如何更新指令

在我的指令上使用 ng-if="slides" 会强制指令仅在幻灯片包含内容时才运行。而这正是我想要的。