使用 Ionic 生成动态模态答案

【问题标题】：Generate dynamic Modals using Ionic使用 Ionic 生成动态模态
【发布时间】：2016-07-21 14:27:32
【问题描述】：

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

控制器

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

【问题讨论】：

标签： angularjs ionic-framework

【解决方案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...

【讨论】：

我正在尝试执行上述操作，但不断获取 GET file:///android_asset/www/undefined.html net::ERR_FILE_NOT_FOUND。对于我使用的模态脚本标签：id="{{hist.id}}-modal.html"。当我查看 html 源代码时，脚本 id 标记和 showModal(1) 参数中的数字都是正确的。所以不知道为什么会发生这种情况......有什么想法吗？
android_asset 建议您运行一些包装器/Cordova 的东西...您是否尝试过常规模式 - 它们是否被检索到？在我的示例中，我将html template 直接放在ng-app 下，这也可能有所不同。