Question

嗨，在我的应用程序中，我已经有一个登录的离子模式

V.Speak ("Text", SpeechVoiceSpeakFlags.SVSFlagsAsync | SpeechVoiceSpeakFlags.SVSFIsXML);

现在我需要用新的html页面创建一个新的离子模态。我怎么能这样做？

Answer 1

虽然答案完全有效，但每次需要模态时都不需要创建新的控制器。

app.controller('Ctrl1' function($scope, $ionicModal){

     $ionicModal.fromTemplateUrl('modalA.html', {
          scope: $scope,
          animation: 'slide-in-up'
        }).then(function(modal) {
          $scope.ModalA= modal;
        });

     $ionicModal.fromTemplateUrl('modalB.html', {
          scope: $scope,
          animation: 'slide-in-up'
        }).then(function(modal) {
          $scope.ModalB= modal;
        });


    //now you can indivitaully call any modal to show

    $scope.ShowModalA = function (){
         $scope.ModalA.show()
    }

    $scope.ShowModalB= function (){
         $scope.ModalB.show()
    }

 })

Answer 2

单一功能多实例。

$scope.openModelTemplate = function(_templateName){
    if($scope.modal){
        $scope.closeModal();
    }
    var templateName = _templateName;
    $ionicModal.fromTemplateUrl("./templates/" + templateName + ".html",{
        scope : $scope,
        animation : "slide-in-up"
    }).then(function(modal){
        $scope.modal = modal;
        $scope.openModal();
    });
};

$scope.openModal = function(){
    $scope.modal.show();
};

$scope.closeModal = function(){
    $scope.modal.hide();
};

$scope.$on('$destroy', function() {
    $scope.modal.remove();
});

Answer 3

您通常应将每个模态放在控制器中以用于特定视图。这样，当您离开视图时，您可以销毁模态（如果适用）。

＆＃13;

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($rootScope, $ionicConfig) {

})

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

  $ionicConfigProvider.backButton.text('').previousTitleText(false);

  $stateProvider

    .state('page1', {
    url: "/page1",
    templateUrl: "page1.html",
    controller: 'Page1Controller'
  })

  .state('page2', {
    url: "/page2",
    templateUrl: "page2.html",
    controller: 'Page2Controller'
  })

  $urlRouterProvider.otherwise('/page1');

})

.controller("Page1Controller", function($scope, $ionicModal) {
  console.log("Page1Controller!");

  $scope.$on("$ionicView.beforeLeave", function() {
    if ($scope.modal) $scope.modal.remove();
  })
  $scope.openModal = function() {
    $ionicModal.fromTemplateUrl('modal1.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
      $scope.modal.show();

    });
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };

})

.controller("Page2Controller", function($scope, $ionicModal) {
  console.log("Page2Controller!");

  $scope.$on("$ionicView.beforeLeave", function() {
    if ($scope.modal) $scope.modal.remove();
  })
  $scope.openModal = function() {
    $ionicModal.fromTemplateUrl('modal2.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
      $scope.modal.show();

    });
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };

})

＆＃13;

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Backbutton Issue</title>

  <link href="//code.ionicframework.com/1.0.0-rc.4/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/1.0.0-rc.4/js/ionic.bundle.min.js"></script>

</head>

<body ng-app="starter">
  <ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>

  <script id="page1.html" type="text/ng-template">
<ion-view title="Page 1">

  <ion-content class="padding">
    <h2>This is page one!</h2>
    <button class="button" ui-sref="page2">Go To Page 2</button>
    <button class="button" ng-click="openModal()">Open Modal 1</button>
  </ion-content>

</ion-view>
  </script>

  <script id="page2.html" type="text/ng-template">
<ion-view title="Page 2">

  <ion-content class="padding">
    <h2>This is page two!</h2>
    <button class="button" ng-click="openModal()">Open Modal 2</button>
  </ion-content>

</ion-view>
  </script>


  <script id="modal1.html" type="text/ng-template">
<ion-modal-view>

  <ion-header-bar align-title="left" class="bar-positive">
    <h1 class="title">Modal 1!</h1>
    <div class="buttons">
      <button class="button" ng-click="closeModal()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    This is Modal # 1!
  </ion-content>
</ion-modal-view>
  </script>

  <script id="modal2.html" type="text/ng-template">
<ion-modal-view>

  <ion-header-bar align-title="left" class="bar-positive">
    <h1 class="title">Modal 2!</h1>
    <div class="buttons">
      <button class="button" ng-click="closeModal()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    This is Modal # 2!
  </ion-content>
</ion-modal-view>
  </script>


</body>

</html>

＆＃13;

如何在cordova应用程序中创建两个离子模态？

3 个答案: