I am trying to add multiple tabs in my angularjs application.
On click of any menu item, I open the view in a new tab.
User have a optin to close any existing tab and he can click the menu option again to opne the view again as a tab.
Till now all this is working fine, but the issue is when the tab is closed I am not able to clear the previous sticky state. When user clicks on the same menu the new view is loading with the previous state.
On the close tab action I am trying to clear the state as following.
$stickyState.stateInactivated($state.$current)
$stickyState.reset('tabs.survey')
My routing for the tab is as following.
$stateProvider.state('tabs.survey', {
url: '/survey',
sticky: true,
views: {
'survey': {
templateUrl: 'partials/survey.html',
controller : 'surveyController'
}
}
});
I applied a workaround/hack to fix this issue
I added a new parameter to the route as following.
$stateProvider.state('tabs.survey', {
url: '/survey/:ts',
sticky: true,
views: {
'survey': {
templateUrl: 'partials/survey.html',
controller: 'surveyController'
}
}
});
Added the module run configruation like following.
app.run(function ($state, $rootScope, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
})
Finally on creating of a new tab item, I tried to changed the parameter to refresh the old state as following.
$state.go('tabs.survey', { "ts": 1 });
$state.go('tabs.survey', { "ts": 0 });
This is just a workaround. There can be some better solution for this, which I am not sure at this point of time.
All suggestions are welcome.
Related
I have this routing on my webpage:
app.config(function($routeProvider)
{
$routeProvider
.when("/",
{
//
})
.when("/DokumentRoute",
{
templateUrl : "static/routes/dokument.html",
controller : "dokumentController"
})
.when("/MarkningarRoute",
{
templateUrl : "static/routes/markning.html",
controller: "markningarController"
})
.otherwise(
{
templateUrl: "static/routes/pageNotFound.html",
controller : "pageNotFoundController"
});
});
When I refresh the page (F5) I want to cancel the routing, meaning I don't want to show anything within the ng-view tag
<div ng-view id="view"></div>
This is what happens now:
When I start the web page it shows no routing-page. I click on "dokument" and it routes to the dokument page, which shows in the ng-view tag.
When I hit F5 the page refreshes, but it STILL SHOWS the dokument route!
This is what I want:
I want the routing to cleared. I want the web site to look like when I first entered it. (nothing showing in the ng-view tag)
How can I fix this?
If anyone is interested, this is how I solved it:
app.run(function ($location, $rootScope) {
$rootScope.$on('$routeChangeStart', function (event, next, current) {
if (!current) {
$location.path('/');
}
});
});
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 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 have angularjs route with the following definition:
moduleA.config(function($routeProvider){
$routeProvider.
when('/A',{templateUrl:'A.jsp'}).
when('/B',{templateUrl:'B.jsp'}).
when('/C',{templateUrl:'C.jsp'}).
otherwise({
redirectTo: '/',
templateUrl: 'A.jsp'
});
});
Now, let say I click on something and it is redirected to #/C/ view. After refreshing the page, it is redirecting to view C and not to the default view.
I have to show default page after every page refresh happens.
I thought of changing the url to base url while refreshing the page, so that it can be redirected to default page. I am looking for better alternative for this through Angularjs way.
Thanks in advance.
Try this:
In the app.run() block inject 'window' and $location dependency and add:
window.onbeforeunload = function () {
$location.path('/');
};
Like #maurycy commented, If you want user to go to default page anytime a user he's comming to your application, you don't need the event.
just:
$rootScope.$on('$routeChangeStart', function (event, next, current) {
if (!current) {
$location.path('/');
}
});
in your app.run() function.
It should work
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.