Ionic(ionicframework)一款接近原生的Html5移动App开发框架 创建精彩的应用 从这里开始 -$ionicModal
漂亮的界面 追求性能 专注原生 免费开源
$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方法传递对象。 |
- 返回:
promise
用ionicModal
控制器的一个实例加以解决的承诺。