案例:ionic案例     状态:可编辑再运行    进入竖版
 运行结果 
x
            <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
 
1
<html ng-app="ionicApp">
2
  <head>
3
    <meta charset="utf-8">
4
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
5
    
6
    <title>W3xue教程(w3xue.com)</title>
7
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
8
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
9
    <style>
10
    body {
11
        cursor: url('http://ionicframework.com/img/finger.png'), auto;
12
    }
13
    </style>
14
    <script>
15
    angular.module('ionicApp', ['ionic'])
16
17
    .controller('AppCtrl', function($scope, $ionicModal) {
18
      
19
      $scope.contacts = [
20
        { name: 'Gordon Freeman' },
21
        { name: 'Barney Calhoun' },
22
        { name: 'Lamarr the Headcrab' },
23
      ];
24
25
      $ionicModal.fromTemplateUrl('templates/modal.html', {
26
        scope: $scope
27
      }).then(function(modal) {
28
        $scope.modal = modal;
29
      });
30
      
31
      $scope.createContact = function(u) {        
32
        $scope.contacts.push({ name: u.firstName + ' ' + u.lastName });
33
        $scope.modal.hide();
34
      };
35
36
    });
37
    </script>
38
  </head>
39
  <body ng-controller="AppCtrl">
40
    
41
    <ion-header-bar class="bar-positive">
42
      <h1 class="title">Contacts</h1>
43
      <div class="buttons">
44
        <button class="button button-icon ion-compose" ng-click="modal.show()">
45
        </button>
46
      </div>
47
    </ion-header-bar>
48
    <ion-content>