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 =＆＃34;幻灯片＆＃34; 会强制该指令仅在幻灯片包含内容时才能运行。这正是我想要的。

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

1 个答案: