如何在应用启动时自动打开模态?

时间:2015-03-26 11:17:37

标签: javascript modal-dialog ionic-framework hybrid-mobile-app

Currenly我有一个模式,当点击一个按钮时会打开它。然而,这不是我想要的,我希望在启动应用程序时打开模态。我的目标是创建一个只在用户第一次使用该应用程序时才会出现的简介模式。但是,我在应用启动时打开模式时遇到问题。第一步是在应用启动时打开模态。然后第二步是创建一个函数,如果用户之前已经在应用程序上,该函数将保存在本地存储上。如果没有,那么它将显示模态。如果是,那么它将隐藏模态。我在http://jsfiddle.net/zono/vHG7j/上看过这个函数的例子但是我也无法使用我当前的模态。非常感谢帮助,提前谢谢:)

我的模式:

<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>

JS:

angular.module('Mob').controller('TeamCtrl', function($scope, $ionicModal) {

/* Modal */
$ionicModal.fromTemplateUrl('intro-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();
  });
})

1 个答案:

答案 0 :(得分:2)

您可以尝试这样的事情:

angular.module('Mob').controller('TeamCtrl', function($scope, $ionicModal) {

  /* Modal */
  $ionicModal.fromTemplateUrl('intro-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();
  });

  // opens the modal only one time
  if(!localStorage.getItem("popupWasShown")){
    $scope.modal.show();
    localStorage.setItem("popupWasShown", true);
  }

});