$ionicModal

关联: ionicModal controller.

可以遮住用户主界面的内容框,需将模版的内容放在<ion-modal-view>元素内。

注意: - modal 会从它的起始 Scope 广播'modal.shown', 'modal.hidden', 'modal.removed'事件,作为事件参数传递removedmodal两个状态。当删除模版时调用隐藏事件。

  • 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。

实例该文档来自ionic中文网ionic-china

<script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>
</script>

然后你就可以在你的 Controller 里面的注入 $ionicModal 。然后调用你刚刚写入的模板,进行初始化操作。

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $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
  });
});

方法

fromTemplate(templateString, options)

参数 类型 说明
templateString string

模板的字符串作为模型的内容

options object

options 会传递到ionicModal#initialize方法中

  • 返回: object一个ionicModal控制器的实例。

fromTemplateUrl(templateUrl, options)

参数 类型 说明
templateUrl string

载入模板的url

options object

通过ionicModal#initialize方法传递对象

  • 返回: promise Promises对象是CommonJS工作组提出的一种规范,目的是为异步编程提供统一接口。将被(ionic-china中文网文档)ionicModal控制器解析。