ionic-modal （模态框）

ionic-modal （模态框）

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

示例代码如下：

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <script src="js/ionic.bundle.js"></script>
 8     <title></title>
 9 </head>
10 <body ng-controller="myCtr">
11 <ion-header-bar>
12     <h1 class="title">Header</h1>
13 </ion-header-bar>
14 <ion-content>
15     <p>Hello</p>
16     <button class="button button-energized" ng-click="show()">showModal</button>
17 </ion-content>
18 <ion-footer-bar>
19     <h1 class="title">Footer</h1>
20 </ion-footer-bar>
21 <script id="myModal.html" type="text/ng-template">
22     <div class="modal">
23         <ion-header-bar>
24             <h1 class="title">我的模型标题</h1>
25         </ion-header-bar>
26         <ion-content>
27             Hello!
28         </ion-content>
29     </div>
30 </script>
31 
32 <script>
33     var app = angular.module('myApp', ['ionic']);
34     app.controller('myCtr',['$scope','$ionicModal',function($scope,$ionicModal){
35         $scope.show = function(){
36             $ionicModal.fromTemplateUrl('myModal.html',{
37                 scope:$scope})
38                     .then(function(modal){
39                         $scope.modal = modal;
40                         $scope.modal.show();
41                     })
42         }
43     }]);
44 </script>
45 </body>
46 </html>
 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <script src="js/ionic.bundle.js"></script>
 8     <title></title>
 9 </head>
10 <body ng-controller="myCtr">
11 <ion-header-bar>
12     <h1 class="title">Header</h1>
13 </ion-header-bar>
14 <ion-content>
15     <p>Hello</p>
16     <button class="button button-energized" ng-click="show()">showModal</button>
17 </ion-content>
18 <ion-footer-bar>
19     <h1 class="title">Footer</h1>
20 </ion-footer-bar>
21 <script id="myModal.html" type="text/ng-template">
22     <div class="modal">
23         <ion-header-bar>
24             <h1 class="title">我的模型标题</h1>
25         </ion-header-bar>
26         <ion-content>
27             Hello!
28         </ion-content>
29     </div>
30 </script>
31 
32 <script>
33     var app = angular.module('myApp', ['ionic']);
34     app.controller('myCtr',['$scope','$ionicModal',function($scope,$ionicModal){
35         $scope.show = function(){
36             $ionicModal.fromTemplateUrl('myModal.html',{
37                 scope:$scope})
38                     .then(function(modal){
39                         $scope.modal = modal;
40                         $scope.modal.show();
41                     })
42         }
43     }]);
44 </script>
45 </body>
46 </html>

效果图如下：

 

posted @ 2017-01-09 18:35  时间脱臼  阅读(338)  评论(0)    收藏  举报