Question

我需要一些形式非常相似的模态对话框，因此决定将它们分解为组件mycomponent并生成包含它的ionicModal。一切顺利，mycomponent在需要时启动，但我无法弄清楚如何从mycomponent内部获取按钮以关闭mycomponent模式对话框。

这样做的正确方法是什么？ ionicModal的教程似乎使用了一个全局范围的hide函数，当我添加更多这样的模态和组件时，这将是不行的。

app.component('mycomponent',{
    templateUrl: 'js/mycomponent.html',
    controller: function() {
          //various stuff
    }    
});

app.controller("mycontroller",function($scope,$ionicModal){
  $scope.mymodal = $ionicModal.fromTemplate(
      '<mycomponent options="various stuff"></mycomponent>', {
    scope: $scope
  });
});

mycomponent.html：

<ion-modal-view>
    <ion-header-bar class=bar-positive>
        <button class="button" ng-click="hide()">Done</button>
    </ion-header-bar>
    <ion-content>
          <!-- various stuff -->
    </ion-content>
</ion-modal-view>

的index.html

<button class="button" ng-click="mymodal.show()">Edit</button>

Answer 1

您可以为模态添加ID，并创建一个将bool函数更改为false的函数。然后在您的模态位置ng-show="modals[10]"

<button class="button" ng-click="closeModal(10)">X</button>

剧本：

var modals = [];

function closeModal(id){
    modals[id] = false;
}

在控制器中添加ID参数：

app.controller("mycontroller",function($scope,$ionicModal){
    $scope.mymodal = $ionicModal.fromTemplate(
        '<mycomponent options="various stuff" modalId="10"></mycomponent>', {
            scope: $scope
        }
    );
});

从mycomponent.html中读取它，就像阅读选项参数

一样

<ion-modal-view ng-show="modals[id]">

尝试Directives。

离子获取模态对话框组件以关闭自身

1 个答案: