$ionicModal

模型是一个内容面板,可以临时越过用户的主视图。通常用于选择或编辑一个项。注意,你需要把模型的内容放入一个带有modal类的div内。

用法

<script id="my-modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar>
      <h1 class="title">我的模型标题</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </div>
</script>
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('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();
  };
  //当我们用到模型时,清除它!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // 当隐藏的模型时执行动作
  $scope.$on('modal.hide', function() {
    // 执行动作
  });
  // 当移动模型时执行动作
  $scope.$on('modal.removed', function() {
    // 执行动作
  });
});

方法

fromTemplate(templateString, options)

参数 类型 详情
templateString 字符串

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

options 对象

传递ionicModal#initialize方法的选项。

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

fromTemplateUrl(templateUrl, options)

参数 类型 详情
templateUrl 字符串

载入模板的url。

options 对象

通过ionicModal#initialize方法传递对象。

  • 返回: promiseionicModal控制器的一个实例加以解决的承诺。