Генерация динамических модалов с использованием Ionic

0

Я хочу генерировать динамические модалы, используя Ionic, и создал контроллер, который динамически имеет идентификатор элемента ng-repeat, который связан с уникальным модальным. Модаль находится под ионами

контроллер

$scope.showModal = function(id){

    $ionicModal.fromTemplateUrl(id+'-modal.html', {
            scope: $scope,
            animation: 'slide-in-up'
          }).then(function(modal) {
            $scope.modal = modal;
          });       

    window.modal.show();

    $scope.openModal = function() {
        $scope.modal.show();
      };
      $scope.closeModal = function() {
        $scope.modal.hide();
      };        
}

Посмотреть

 < ion-item collection-repeat="hist in history" ng-show="history.length" style="background:none;border:none">

<div class="list card"   ng-click="showModal(id)">

                    <div class="item ">
                        <div class="row" >
                          <div class="col col-25" > <span style="float:left;padding-top:0.4em"><i class="ion-clock largericon"></i></span>  </div>

                          <div class="col col-75" align="left"> 
                            <div style="float:left">
                                <div style="font-size:2em">{{hist.session_time}} </div> 
                                <div style="color:#999">  {{hist.human_date}}</div>
                            </div>
                          </div>

                        </div> 
                    </div>
</div>

      <script id="1-modal.html" type="text/ng-template">
      <ion-modal-view style="background:#24112B"> 
        <ion-header-bar class="bar bar-header bar-royal">
          <h1 class="title">Session Started... </h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()"><i class="ion-close-round"></i></button>
        </ion-header-bar>
        <ion-content class="padding">

        <div style="padding-top:1.3em;padding-bottom:1.3em">
            <div class="row" align="center" >
              <div class="col col-100" align="center">Start by keeping your repetitions to the beat...</div>
            </div> 


        </div>

        </ion-content>
      </ion-modal-view>
     </script>  
</ion-item>
Теги:
ionic-framework

1 ответ

0

Посмотрите, как это работает: https://plnkr.co/edit/UcoU4i?p=preview

$scope.showModal = function(id){
    $ionicModal.fromTemplateUrl(id+'-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
      $scope.modal.show(); // show modal after it was loaded
    });        
}

EDIT: Также убедитесь, что ng-click="showModal(id)" вы передаете некоторый фактический id...

  • 0
    Я пытаюсь сделать это, но продолжаю получать GET-файл: ///android_asset/www/undefined.html net :: ERR_FILE_NOT_FOUND. Для тега модального скрипта я использую: id = "{{hist.id}} - modal.html". Когда я смотрю в html-источнике, числа верны как внутри тега id скрипта, так и в параметре showModal (1). Так что не уверен, почему это произойдет ... любая идея?
  • 0
    android_asset предлагает вам запустить какую-нибудь оболочку / Cordova ... Вы пробовали обычные модалы - они найдены? В моем примере я поместил html template непосредственно в ng-app , что также может быть разницей.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню