如何在应用程序启动时自动打开模态?
How to automatically open modal on app launch?
目前我有一个模式,当点击一个按钮时它会打开。但这不是我想要的,我希望在应用程序启动时打开模式。我的目标是创建一个仅在用户第一次使用该应用程序时出现的介绍模式。但是我在应用程序启动时打开模式时遇到问题。第一步是在应用程序启动时打开模式。然后第二步是创建一个函数,如果用户之前使用过该应用程序,该函数将保存在本地存储中。如果不是,那么它将显示模态。如果是,那么它将隐藏模态。我在 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();
});
})
你可以试试这样:
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);
}
});
目前我有一个模式,当点击一个按钮时它会打开。但这不是我想要的,我希望在应用程序启动时打开模式。我的目标是创建一个仅在用户第一次使用该应用程序时出现的介绍模式。但是我在应用程序启动时打开模式时遇到问题。第一步是在应用程序启动时打开模式。然后第二步是创建一个函数,如果用户之前使用过该应用程序,该函数将保存在本地存储中。如果不是,那么它将显示模态。如果是,那么它将隐藏模态。我在 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();
});
})
你可以试试这样:
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);
}
});