Question

我试图通过Ionic Creator中的按钮点击来调用模态，然后丢失接缝。有人可以建议谁完成这项工作？谢谢！

Answer 1

您需要为此

编写代码

首先使用html元素创建角度模板。例如。

<script id="templates/modal.html" type="text/ng-template">
    <ion-modal-view>
        <h3>Modal demo</h3>
    </ion-modal-view>
</script>

然后在js文件中编写代码来调用模板

function ($scope, $stateParams, $ionicModal) {

    $ionicModal.fromTemplateUrl('templates/modal.html', {
        scope: $scope
      }).then(function(modal) {
        $scope.modal = modal;
    });

}

最后将ng-click指令添加到元素。

例如。

<h3 ng-click="modal.show()" >Show modal</h3>

Answer 2

检查此链接： https://www.tutorialspoint.com/ionic/ionic_js_modal.htm 编码愉快。随时随地创建模态，我知道这不是最好的解决方案，但是它可以工作！

.controller('MyController', function($scope, $ionicModal) {

       $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
          ' <ion-header-bar>' +
             '<h1 class = "title">Modal Title</h1>' +
          '</ion-header-bar>' +

          '<ion-content>'+
             '<button class = "button icon icon-left ion-ios-close-outline"
                ng-click = "closeModal()">Close Modal</button>' +
          '</ion-content>' +

       '</ion-modal-view>', {
          scope: $scope,
          animation: 'slide-in-up'
       })

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

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

       //Cleanup the modal when we're done with it!
       $scope.$on('$destroy', function() {
          $scope.modal.remove();
       });

       // Execute action on hide modal
       $scope.$on('modal.hidden', function() {
          // Execute action
       });

       // Execute action on remove modal
       $scope.$on('modal.removed', function() {
          // Execute action
       });
    });

    //Just invoke it on your click function
    $scope.openModal();

模态和离子创造者

2 个答案: