ion-slides/ion-slide-page指令无法正确呈现

Question

我正在尝试在我正在创建的离子应用程序(使用Ionic1代码库)上实现ion-slides/ion-slide-page指令到页面中，但我无法让每个单独的ion-slide-page指令水平排列在一起(只显示当前活动的页面-根据这里的动画GIF示例：http://ionicframework.com/docs/api/directive/ionSlides/)

我的控制器结构是这样的：

​

.controller('ProductsController', function($scope, $ionicSlideBoxDelegate, ManageAppDatabase, )
{

            ManageAppDatabase.retrieveProductsFromDatabaseTable(function(numRecords)
            {

                $scope.products                                                                 =    numRecords;
                $scope.options = {
                    direction: 'horizontal',
                      loop: true,
                      effect: fade,
                      speed: 500
                }
                $scope.data = {};
                $scope.$watch('data.slider', function(nv, ov) 
                {
                  $scope.slider = $scope.data.slider;
                });
            });
}

​

关联视图的HTML结构如下：

​

<ion-view title="Products">
    <ion-content>
        
            <div class="carousel-container">
                <ion-slides  options="options" slider="data.slider">
                    <ion-slide-page class="carousel-slide" ng-repeat="product in products">
                        <img src="{{ product.image }}">
                         <h1>{{ product.title }}</h1>
                        <small>{{ product.date }}</small>
                        <div class="product-summary" ng-bind-html="product.summary | renderHTMLCorrectly"></div>
                      </ion-slide-page>
                </ion-slides>
            </div>

    </ion-content>
</ion-view>

​

上面使用的CSS (如下所示的Sass )：

​

.carousel-container {
    background: #e6e6e6;
}

.carousel-slide {
    padding:2.5% !important;   

    img {
        display: block;
        width: 100%;
        background: rgb(68, 68, 68);
        margin: 0;
    }


    h1 {
        padding: 0;
    }


    small {
        display: block;
        padding: 0 0 1em 0;
        font-size: 0.85em;
    }


    p {
        padding: 0 0 1.5em 0;
        font-size:0.9em;
        line-height:1.3em;
    }


    span {
        display: block;
        text-align:center;
        color:rgb(255, 255, 255);
        font-size: 0.75em;
    }
}

​

无论我做什么，HTML视图模板总是与位于另一个下方的每个离子幻灯片页面一起加载。

谁能告诉我这里我遗漏了什么/做错了什么？已经花了几个小时试图弄清楚这件事，但我不能取得任何进展。

当我在命令行运行ionic info时，我得到的结果如下：

Cordova CLI:未安装Gulp版本: CLI版本1.2.1 Gulp local：

Ionic版本: 1.3.0 Ionic CLI版本: 1.7.14 Ionic App Lib版本: 0.7.0 ios-deploy版本:未安装ios-sim版本: 5.0.8 OS: Mac OS X El Capitan Node版本: v0.10.26 Xcode版本: Xcode 7.3 Build版本7D175

Ionic似乎是最新的，尽管这一行: Ionic App Lib Version: 0.7.0总是在那里，即使我运行ionic库更新或创建一个新的ionic项目。我还需要更新这里的任何其他东西吗？

感谢任何人能在这里提供的任何帮助/建议，因为这让我发疯！

亲切的问候

Answer 1

我和你有同样的问题。

似乎缺少了一些东西...

但是看起来你的代码中有一些奇怪的东西。您确定所提供的控制器工作正常吗？

你指的是下面的内容吗？

​

.controller('ProductsController', function($scope, $ionicSlideBoxDelegate, ManageAppDatabase, )
{

            ManageAppDatabase.retrieveProductsFromDatabaseTable(function(numRecords)
            {

                $scope.products                                                                 =    numRecords;
                $scope.options = {
                    direction: 'horizontal',
                      loop: true,
                      effect: fade,
                      speed: 500
                }
                $scope.data = {};
                $scope.$watch('data.slider', function(nv, ov) 
                {
                  $scope.slider = ov.slider;
                });
            });
}

​