Question

我有一个带有列表菜单的滑动菜单，每个列表都有两个项目的轮播。我希望在关闭菜单然后重新打开它之后显示第一个轮播项目，然后单击菜单页面中但在列表外部显示的按钮。

这就是我所拥有的：

<ons-template id="menu.html">
         <ons-page>
            <span style = "text-align:center;width:30dp;margin:25%;">Presentations</span>
            <ons-list id ="list"  style="padding:0px;" ng-controller="ItemController">

            <ons-list-item ng-repeat="item in local" style="padding:0;">
              <ons-carousel  swipeable auto-scroll auto-refresh initial-index="0" style="height: 100%;width: 100%; position: absolute;">
                <ons-carousel-item style="padding:0;">
                  <ons-button modifier = "quiet" ng-click="menu.close();customSetMainPage(item.id);">
                    {{item.name}}
                  </ons-button>
                </ons-carousel-item>
                <ons-carousel-item style ="text-align: center;">
                  <ons-button ng-click="deletepresentation(item.id);local.splice($index, 1);" >
                        Remove
                        <ons-icon icon="ion-trash-a"/>
                  </ons-button>
                </ons-carousel-item>
              </ons-carousel>
            </ons-list-item>
          </ons-list>

            <p>
               <ons-button modifier = "small" style="margin-left: 25%;"  id = "add"
                  onclick="
                  addPresentation();
                  menu.closeMenu();
                  if (runtime.diaginit == false) {
                  runtime.diaginit=true;
                  ons.createDialog('dialog.html').then(function(dialog) {dialog.show();});}
                  else {dialog.show();}
                  "
                  >
                  new  presentation 
               </ons-button>
            </p>
         </ons-page>
      </ons-template>

编辑：

我试着这样做。此行angular.element(document.getElementById('list')).scope().itemToDefault();会阻止我的应用显示此错误

undefined不是一个函数（评估＆＃39; $ scope.carousel [指数]。首先（）＆＃39）

ons.ready(function() {
           menu.setMainPage('first.html');
           menu.on('postclose', function() {
            ons.compile(document.getElementById("carousel"));

          });
           menu.on('preclose', function() {
                angular.element(document.getElementById('list')).scope().itemToDefault();

          });
      });


var application = angular.module('app', ['onsen']);
application.controller('ItemController',function($scope){
    $scope.local = [];
    $scope.itemToDefault = function (){
            var c = $scope.carousel;
            for (var index in $scope.carousel) {
                if( $scope.carousel.hasOwnProperty( index ) ) {
                     $scope.carousel[index].first(); 
                } 
            }
        };

    });

Answer 1

你需要＆＃34; name＆＃34;你的旋转木马能够访问它们：<ons-carousel var="carousel.{{$index}}" ...>。然后你需要这样的东西来将每个轮播恢复到它的第一个索引：

for (var index in $scope.carousel) {
  if( $scope.carousel.hasOwnProperty( index ) ) {
    $scope.carousel[index].first();
  } 
}

每次需要时都打电话。在菜单中按钮操作之前或之后，以及滑动菜单（postclose）的preopen或mySlidingMenu.on('postclose', restore_all_carousels)事件。

希望它有所帮助！

onsen-ui：将活动轮播项设置为0（滑动菜单菜单与轮播列表）

1 个答案: