使用异步服务器调用时如何使 angular 轮播指令工作？

Question

我创建了这个随机更改图像的轮播指令。只要同步获取幻灯片，这就可以正常工作。但是，如果我想通过 $http 异步调用来调用我的网络服务器，该怎么做呢？

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

        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

我终于找到了答案，而且很简单。也许我应该用不同的措辞来表达这个问题？类似于：How can I update a directive when a service finishes loading in a controller in AngularJS

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

使用异步服务器调用时如何使 angular 轮播指令工作？

How to make angular carousel directive work when using async server call?

jquery

asynchronous

angularjs-directive