I'm having issues with an overlay panel.
The first page loads, you click a link... It pops up an overlay, the router fires a state and controller, and it populates the contents of the overlay.
There is a back button on the overlay, I trigger the overlay to close, call window.history.back() which sends the router off to load the new url (previous url) and it runs it through the router again but obviously refreshes the backing page in doing so.
So the end result is when you press a link, the overlay slides out beautifully, you then press back, the overlay slides back in, it then refreshes the page. You'd think then, why not just say in the controller, if there was an overlay and now there isn't do not change the view content... I can't, as the template stuff gets placed into the ui-view which is remove all my content.
So I need a way of changing the url without running through all of the controller stuff again so to avoid the template being inserted.
Any ideas on how to do this? Or examples of it working somewhere else.
Related
I made a page with the same url all the time. I show my div by hiding and showing components, but no route. So, now I need the user can go back page using the back arrow of the explorer. Is there any possibility?
The back button of the browser change the window history :
https://developer.mozilla.org/fr/docs/Web/API/Window/history
So i don't think you can link the browser back btn to a javascript variable and prevent his effect on history
You can find on the net solution where people force history.forward() when back btn is pressed, you can change your variable here. But it's a bit dirty
How can I stop the browser back button using JavaScript?
I'm using React with react-router v4 for routing in a SPA app.
From within a list page, when user taps on an item, we navigate to detail url which renders detail component.
From here, if I click back, route transitions to list page but list page itself is reloaded. So its scroll position, selection of an item (which opened the details page) is lost.
I have been struggling to think about how to approach this problem. One way I was thinking is to build all pages to open as model on top of another so base page context is always there and when user navigates back, I can start to close the modals revealing previous page in its exact state.
Not sure if that is a right approach.
You could store the current scroll position locally, then scroll back to it when your list page component is mounted.
These are jQuery answers, but the principle is the same:
Restoring page scroll position with jQuery
How can I retain the scroll position of a scrollable area when pressing back button?
I have a spa developed with AngularJS (routing with ngroute). Every template have the menu, in the menu there is a back button. I want to return to the previous view with he's state (information, scroll in the page etc). If I code every button in the menu to open the next template in modal that have dimension of full screen, and the back button just close the current modal. This method can do a memory leak?
This case is an hybrid application running in the tablet, the back button is in the menu of application not that of the browser.
Why don't you use $window.history.back();
Why don't you create a template for the menu and include it into your views by using ng-include?
I have a view for which route has been defined. On the view I have a no of images and when I click any of them the Modal Dialog appears with the detail of that image. What I want to do is to change the url only when the modal appears so user can easily share them. And yes, the share url would be another route I will define so when user directly come to that one, the modal pops in. Any suggestion please?
I would not change the URL when a modal appears. A modal is an overlay of your page and actually not a new page with a new URL.
Many image hosters, however, show the URL in a read-only field under the picture so that users can copy it. Maybe this is the way you would like to go.
On the page itself I recommend using $location to determine if there is an imageId in your URL. If so, just invoke the same logic as if a user clicked on that image on the page.
I have an Angular app that uses Angular UI Routing to provide states. The basic routing between pages works.
The app has multiple pages, and one of those pages has tabs. When I navigate to the page, I get a nice animation, and the back button appears in the header.
But when I navigate to the tabs page, the back button doesn't appear and there is no animation to the page. Is it possible to get an animation when I navigate to the page that has tabs, and to have the back button appear?
UPDATE:
Made a new example that better shows what I mean:
http://plnkr.co/edit/jKII2S3uEnEOVDy9WBA2?p=preview
look into this -
http://ionicframework.com/docs/angularjs/controllers/view-state/
The View Service is leveraged by the Ionic's tabs directive, which has
child tab directives. Each tab requires its own history stack (forward
and back buttons), and to do so each tab has its own navView
directive. This system is similar to what you see in modern apps, such
as iOS's App Store, or Android's Play Store.
each tab within tabs has it's own history stack, therefor your nav-bar history is reset when you enter a tab for the first time.
it is managed with a $historyId value on the scope of the directive. maybe you can work around that with the use of these value.