Question

我正在尝试将离子幻灯片/离子幻灯片页面指令实施到Ionic App上的页面（使用Ionic 1代码库）我正在创建但我无法获得每个单独的离子幻灯片-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视图模板总是会加载每个离子滑动页面，而不管我做什么。

谁能告诉我这里错过了什么/做错了什么？花了最后几个小时试图找到底线，我无法取得任何进展。

当我在命令行运行离子信息时，这就是我得到的：

Cordova CLI：未安装 Gulp版本：CLI版本1.2.1 Gulp local：
离子版：1.3.0 离子CLI版本：1.7.14 Ionic App Lib版本：0.7.0 ios-deploy版本：未安装 ios-sim版本：5.0.8 操作系统：Mac OS X El Capitan 节点版本：v0.10.26 Xcode版本：Xcode 7.3 Build版本7D175

离子似乎是最新的，尽管这一行：Ionic App Lib版本：0.7.0总是存在，即使我运行离子lib更新或创建一个新的离子项目。我需要在这里更新其他任何内容吗？

感谢任何人可以提供的任何帮助/建议，因为这让我疯了！

亲切的问候

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;
                });
            });
}

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

1 个答案: