ionic model指令学习
文章参考
http://blog.csdn.net/pdw2009/article/details/47832921
http://www.cnblogs.com/CheeseZH/p/4522264.html
Ionic中[弹出式窗口]有两种（如下图所示），ionicModal和ionicModal和ionicPopup;
$ionicModal是完整的页面；
$ionicPopup是(Dialog)对话框样式的，直接用JavaScript设定对话框的一些参数，通常用于通知消息、确认等作用；
例子
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<!--<script src="public/js/jquery.js"></script>-->
<script src="../public/ionic/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="../public/ionic/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
<ion-header-bar class="bar-energized">
<h1 class="title">Contact Info</h1>
</ion-header-bar>
<ion-content>
<div class="card" ng-click="openModal()">
<div class="item item-divider">
{{contact.name}}
</div>
<div class="item item-text-wrap">
{{contact.info}}
</div>
</div>
</ion-content>
<script id="contact-modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<h1 class="title">Edit Contact</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text" ng-model="contact.name">
</label>
<label class="item item-input">
<span class="input-label">Info</span>
<input type="text" ng-model="contact.info">
</label>
</div>
<button class="button button-full button-energized" ng-click="closeModal()">Done</button>
</ion-content>
</div>
</script>
</body>
</html>
<script>
angular.module('myApp', ['ionic'])
.controller('myCtrl', function($scope,$ionicModal) {
$scope.contact = {
name: 'Mittens Cat',
info: 'Tap anywhere on the card to open the modal'
};
$ionicModal.fromTemplateUrl('contact-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal
});
//弹出model 层
$scope.openModal = function() {
$scope.modal.show()
};
//关闭model 层
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
});
</script>这部分需要注意以下几点：
（1）不要忘了function的参数$ionicModal，否则会报错（用浏览器的调试工具F12可以看到）
（2）使用fromTemplateUrl将HTML代码中script（根据id）在HTML页面生成自己的Modal（也就是说，在打开页面的时候，是没有图3中的红色 div的，当调用了fromTemplateUrl之后，才会生成这个div，而且每调用一次就会生成一个红色 div哦，所以写代码的时候要把逻辑设计好，注意及时remove()。）；
（3）openModal和closeModal函数很容易理解，这个估计是Modal最常用的方法；
（4）可以通过scope.scope.on来进行更丰富的操作（当然，不用scope.scope.on也可以进行丰富的操作。）；
添加$ionicModal依赖，便可以使用$ionicModal。$ionicModal使用了deferred来异步加载模板，加载完成后会返回modal对象，这里使用了$scope.modal = modal来接收这个modal对象，从而控制这个modal。这样我们就实现了一个modal。
相关推荐
绿豆饼 2020-07-28
半纸药笺 2020-07-26
半纸药笺 2020-06-14
芯果科技蔡彦 2020-04-30
芯果科技蔡彦 2020-04-14
kfq00 2020-04-10
samllcat 2020-03-27
ZillahV0 2016-08-27
半纸药笺 2019-11-18
qixiang0 2015-04-24
shichong 2015-05-14
庆华 2015-12-26
genglang 2016-05-01
琪凡睿 2016-04-28
GoDotDotDot 2018-12-12
WarmPure 2018-10-02
青 2017-09-19
GoDotDotDot 2017-07-21