uib-carousel的高度为0

Question

使用：

• angularjs 1.5.3
• ui-bootstrap 1.3.2

这是我的模板：

<div id="content" class="center">
    <div id="title">
        <uib-carousel active="true" interval="5000" ng-if="slides && slides.length">
            <uib-slide ng-repeat="slide in slides track by slide.name">
                <img ng-src="{{ slide.image }}" />
                <div class="carousel-caption">
                    <p>{{ slide.description }}</p>
                </div>
            </uib-slide>
        </uib-carousel>
    </div>
</div>

在我的代码中的某处，我执行了一次调用（使用了多次使用的工作服务），如下所示：

Index.controller('Index.Main', ['$scope', '$sce', 'MyService', function($scope, $sce, myService) {
    $scope.slides = [];
    myService.loadStuff($scope, ..., function(){
        console.log($scope.slides);
    }, function(data, status) {
        console.log('Could not retrieve stuff');
    }).update();
}]);

具体如下：

1. MyServices在幕后调用$http.get。
2. 当http成功时，控制台将显示一系列幻灯片。现在就是这种情况。
3. 当出现http错误时，控制台将显示错误消息。对不对，情况并非如此。
4. 最后，图像正确地附在dom上。我可以肯定这一点，因为我可以在浏览器中检查它。 然而轮播高度（和内容高度）为0。

我错过了什么？我该如何解决？

Answer 1

我实际上忘了正确指定索引属性。如果没有匹配的索引，则无法确定哪个图像处于活动状态。当没有图像处于活动状态时，容器的高度为0

Answer 2

来自uibootstrap doc：

如您所见，您需要在容器div中声明轮播的高度