zoukankan      html  css  js  c++  java
  • Ionic Js十一:模态

    ionicModal 可以遮住用户主界面的内容框。
    你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。

    <script id="my-modal.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar>
          <h1 class="title">My Modal title</h1>
        </ion-header-bar>
        <ion-content>
          Hello!
        </ion-content>
      </ion-modal-view>
    </script>

    然后你就可以在你的 Controller 里面的注入 $ionicModal 。然后调用你刚刚写入的模板,进行初始化操作。就像下面的代码:

    angular.module('testApp', ['ionic'])
    .controller('MyController', function($scope, $ionicModal) {
      $ionicModal.fromTemplateUrl('my-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();
      };
      //Cleanup the modal when we're done with it!
      $scope.$on('$destroy', function() {
        $scope.modal.remove();
      });
      // Execute action on hide modal
      $scope.$on('modal.hidden', function() {
        // Execute action
      });
      // Execute action on remove modal
      $scope.$on('modal.removed', function() {
        // Execute action
      });
    });


    实例

    HTML 代码

    <html ng-app="ionicApp">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
        
        <title>菜鸟教程(runoob.com)</title>
        <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
        <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
      </head>
      <body ng-controller="AppCtrl">
        
        <ion-header-bar class="bar-positive">
          <h1 class="title">Contacts</h1>
          <div class="buttons">
            <button class="button button-icon ion-compose" ng-click="modal.show()">
            </button>
          </div>
        </ion-header-bar>
        <ion-content>
          <ion-list>
            <ion-item ng-repeat="contact in contacts">
              {{contact.name}}
            </ion-item>
          </ion-list>
        </ion-content>
        
        <script id="templates/modal.html" type="text/ng-template">
          <ion-modal-view>
            <ion-header-bar class="bar bar-header bar-positive">
              <h1 class="title">New Contact</h1>
              <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
            </ion-header-bar>
            <ion-content class="padding">
              <div class="list">
                <label class="item item-input">
                  <span class="input-label">First Name</span>
                  <input ng-model="newUser.firstName" type="text">
                </label>
                <label class="item item-input">
                  <span class="input-label">Last Name</span>
                  <input ng-model="newUser.lastName" type="text">
                </label>
                <label class="item item-input">
                  <span class="input-label">Email</span>
                  <input ng-model="newUser.email" type="text">
                </label>
                <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
              </div>
            </ion-content>
          </ion-modal-view>
        </script>
        
      </body>
    </html>

    CSS 代码

    body {
      cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
    }

    JavaScript 代码

    angular.module('ionicApp', ['ionic'])
    
    .controller('AppCtrl', function($scope, $ionicModal) {
      
      $scope.contacts = [
        { name: 'Gordon Freeman' },
        { name: 'Barney Calhoun' },
        { name: 'Lamarr the Headcrab' },
      ];
    
      $ionicModal.fromTemplateUrl('templates/modal.html', {
        scope: $scope
      }).then(function(modal) {
        $scope.modal = modal;
      });
      
      $scope.createContact = function(u) {        
        $scope.contacts.push({ name: u.firstName + ' ' + u.lastName });
        $scope.modal.hide();
      };
    
    });

  • 相关阅读:
    Postman使用教程
    CAD和ArcGIS转换 矢量配准
    SAP CRM Advanced search和Simple search里Max hit表现行为的差异
    SAP CRM Product simple search的启用步骤
    如何快速定位SAP CRM订单应用(Order Application)错误消息抛出的准确位置
    如何动态修改SAP CRM WebClient UI表格栏的宽度
    如何在SAP CRM WebClient UI里创建web service并使用ABAP消费
    如何处理SAP CRM Web Service错误
    如何使用SAP CRM WebClient UI实现一个类似新浪微博的字数统计器
    如何开启SAP CRM基于WORD模板创建附件的功能
  • 原文地址:https://www.cnblogs.com/quickcodes/p/Ionic-Js-shi-yi-mo-tai.html
Copyright © 2011-2022 走看看