My application has several 'modal' windows, For now there is no specific route to reach an open modal directly. I mean, written the url directly in the browser.
There are a Jquery solution, but how implement some similar solution for angular? where placed? when should run?
You can perform this sort of task within the routing config of your app.
For example, this one is using ui-router, for the routes, and ui-bootstrap for the modals.
In the route config add an onEnter which will fire when the route is first entered.
.state('login', {
onEnter: function ($stateParams, $state, $modal) {
$modal.open({
keyboard: false, // prevents escape-key closing modal
backdrop: 'static', // prevents closing modal outside of the modal
templateUrl: '/views/login', // view to load
controller: 'LoginCtrl' // controller to handle
})
}
})
Now, when navigating to the, in this example, login page the route will open the modal for me.
Related
I have a scenario where on click of the button I am triggering a modal with some information and social networking buttons in the modal footer.
When click on the social networking button i want the url which is sent should show a modal directly instead of showing the page
Route:
.state('main', {
url: '/main',
templateUrl: 'views/mainView.html',
controller: 'mainCtrl'
})
Controller:This is where i am opening a modal on button click
$scope.fnModal = function() {
var modalInstance = $uibModal.open({
animation: ISOURCE_TOGGLE.set,
backdrop: 'static',
templateUrl: 'views/modal/rescheduleModalView.html',
controller: 'ModalCtrl'
})
}
Modal ctrl: This is where the modal should be share on click of social share button using Socialshare service
$scope.socialShare = function() {
Socialshare.share({
'provider': 'facebook',
'attrs': {
'socialshareUrl': window.location.href
}
});
}
but here the main page is getting shared where as i want the modal should be shared directly
Any help would be appreciated.
Create a directive for modal.
Inject the directive in your controller and use it in html as follows.
<modal data-some-attr="value"></modal>
If your modal content is static, you can just add a query parameter in your URL when you open your modal (function $scope.fnModal) with this :
$state.transitionTo('main', {modal: 'true'}, { notify: false });
You don't change anything in your modal controller.
When an user comes to your page main, you have to check if in your url you have the query parameter modal sets to true. If yes, you open the modal or else just show the page without modal.
i have a code in routing like this
.state('resetPassword', {
url: '/home/reset_password',
templateUrl: 'home/home.html',
controller: 'HomeController',
controllerAs: 'vm',
data: {
requireLogin: false /* This is what tells it to require authentication */
},
onEnter: function($state, $uibModal) {
var mymodal=$uibModal.open({
backdrop: true,
templateUrl: 'login/resetpassword.html',
}).result.finally(function() {
$state.go('home');
})
}
})
and close button markup
<div class="reset_section" ng-style="reset">
<span class="modal_close" ng-click="modalClose()">
<i class="material-icons">close</i>
this will open the modal on page loads, but the issue is, i can't able to close the modal by calling the function modalClose(), it is showing $uibModalInstance is not defined and also i need to open one more modal in the same page. after resetting the password, there is one button to login, after clicking the login button.it need to open login popup and have to close the reset password popup.How to do it, can anyone please help me
You could use $uibModalStack.dismissAll(); to dismiss all the existing modals.
In your case, You just need to add $uibModalInstance in the controller and try running it again. use $uibModalInstance.close() function.
I have a modular application where i have routes split into multiple files.
So my system is.
Top
--Main.Module.js
--Main.Routes.js
--Main.Controllers.js
--Main.html
--user (folder)
----User.Module.js
----User.Routes.js
----User.Controllers.js
And in the user folder I have a login folder with a Login.html and a register folder with a Register.html
The main module file looks like this
angular.module('Main', ['ionic', 'Main.Routes', 'Main.Controllers', "User"])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
});
The main route file contains
angular.module('Main.Routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Loader', {
url: '/',
templateUrl: '/views/Main.html',
controller: 'MainController'
});
$urlRouterProvider.otherwise('/');
});
And the Main.Module.js injects these two things as well as the User module which js file looks like this
angular.module('User', ['User.Controllers', 'User.Services', 'User.Routes']);
The user routes file has the routes for the login page and the register page
angular.module('User.Routes', [])
.config(function($stateProvider) {
$stateProvider
.state('Login', {
url: '/user/login',
templateUrl: 'views/user/login/Login.html',
controller: 'LoginController'
})
.state('Register', {
url: '/user/register',
templateUrl: 'views/user/register/Register.html'
});
// if none of the above states are matched, use this as the fallback
});
And when I do $state.go("Login") from the main controller it takes me to the login page without any issue. But I have a register button on the login page which is associated with this block of code
//Move user to the register page
$scope.registerClick = function(){
$state.go("Register");
}
Which redirects me to the register page for around half a second then immediately kick it back over to the main html page. So my question is i need to know why the state isnt staying with the register page and is moving immediately to the main.html page. The register page is part of the page history stack because i can go "back" to it with either the hardware back button or pressing back on chrome during testing. I tried moving the routes back to the main route file and not injecting the user routes but it produced the same results.
==============EDIT=============
Once the application loads, if i change the page it goes to after the main page to the register page and add a link back to the login page this behavior does not occur. I'm just confused on whats different.
set an otherwise
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/defaultpage');
.state('login', {
url: '/login',
templateUrl: 'templates/template.html',
controller: 'Ctrl'
})
.otherstates etc....
});
I see what I did wrong. In the location where I had my button that was supposed to take me to the register page alongside the ng-click directive i also had a href directive set to #. Thank you all for your input though.
The offending line
Create an account
What it should have been
Create an account
I have implemented a way for my controller to open a ui-bootstrap modal after a specific time. However if I navigate away from the page it will still open. The idea is for the modal to only open after a few minutes on that specific view. How do I stop it when a different controller loads? Thanks in advance. Please let me know if any other code is required.
Here is the code to open that modal:
$interval(function () {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'modal.html',
controller: 'ModalInstanceCtrl',
size: 'lg',
});
}, 120000, [1]);
You might need to stop interval using $interval.cancel(your_interval) on route or state change please see this answer for "How to track route or state change?" and go through the $interval documentation $interval.cancel(). Hope this will solve your problem.
I am working on a timeout system for my angularjs app. On timeout I will be presenting the user with a timeout modal. The problem that I am having is with other modals that are already open, the timeout modal appears on top of the existing modal. I am looking for some suggestions on how I can close all the existing modals before opening the timeout modal. I am using the $modal service.
timeoutModal = $modal({
templateUrl: 'components/common/timeout.html',
controller: 'TimeoutController as time',
backdrop: 'static',
prefixEvent: 'timeoutMessage',
show: false
});
You can use
$modalStack.dismissAll();
usage
.controller("MyCtrl", function($scope, $modalStack){
// ...
$scope.closeAll = function(){
$modalStack.dismissAll();
};
)