Question

我想使用Ionic生成动态模态，并创建了一个动态具有ng-repeat项目ID的控制器，该项目链接到唯一模式。模态在离子项下

控制器

$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>

Answer 1

看到它正常工作：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
    });        
}

编辑：还要确保ng-click="showModal(id)"您传递了一些实际的id ...

使用Ionic生成动态模态

1 个答案: