If I have something like this:
{ui-sref="tab({tabid:3})"}
Clicking on the element with the above attribute will trigger a state with URL something like this /tab/:tabid.
For example, http://..../tab/3
Now my problem:
I have a list of tabs implemented using angular-material. Refer this plunk
When I click on Tab1 the state is /tab/1. When I click on Tab2 the state is /tab/2. All these state changes occur with click. But now if I manually change the URL, say I type in the address bar http://..../tab/3, I want the corresponding state change to happen and Tab3 should be activated. At present, suppose I am on Tab3 and I manually change the URL to '..../tab/2', it doesn't activate Tab2, although the state is changed.
Is there a simple way to resolve states from the URL by considering the state parameters?
The main concern here is the use of tabs. The first tab belongs to one state and the remaining tabs belong to another state, each tab uniquely identified by an ID that is available through state parameter. So although the correct state is resolved when I manually change the URL, the correct tab is not not made active. The simplest workaround is to read in the state parameter using $stateParams and set the md-selected attribute of angular-material to activate the corresponding tab.
Related
I noticed that when you use useState in a hook and then use setState to change the value that is being cached, the hook will be called again and re-render the component. While this may be desired most of the time, I have one case where I don't want to re-render when the state changes. This case is when you have a navigation menu (tabs) at the top of the page and when you click on a tab, it shows content in a pane beneath it. I really only want to hide the content for the tab that is currently shown and then display the content for the tab that is selected. When content is hidden, this is essentially setting the css "display" style to "none". This is desirable to preserve the state of the content's pane and also avoid effects like retrieving data.
I can think of one solution to handle this but it does require splitting the components into isolated modules. I am curious though whether there is a way to change state but without having the side effect of a component being re-rendered.
I'm trying to create single page application and one use case is i have details page which can be triggered from multiple parent pages, more like acting as modal box but without any absolute property. I was checking how to show/hide based on the state change from parent.
This is what i have done till now
http://plnkr.co/edit/t34ES8lUihcypetHF0rp?p=preview
If you take a look when clicking View Home from home DOM is not removed while navigating to next state .
But if you are in About Page and click View About, DOM is getting removed.
How can we show/hide ui-view. if we are navigating to different state with same url ?
The same url
url: '^/details/:id',
for both the states is the issue.
Try having a wrapper state say "details" and then in that state's controller you may redirect based on some parameter that tells wrapper state which state to go to.
I am trying to change the route of my url to open a map overlay. The problem is when I switch states, the page template underneath switches as well. I don't want this to happen.
I am using $statechange to detect the map route and executing an event.preventDefault(); which should stop the route template from changing. But in my case, the map url gets put in the address bar and then quickly gets removed.
Any ideas?
It seems counterintuitive to override the state change. Why don't you create the overlay as a child state and just navigate to it normally.
I managed to solve the issue by using the $state.go and declaring options 'notify' to false.. This stops the $stateroute changes to fire.
I have page with three columns,details of each of the columns are as follows(in the attached image)
![Image showing column desc for the jspx page1
The use case is :I want to display one of the jsff's in the second &one in the third column based upon the tree node selected.
The approach i used is to generate a contextual event on tree node click with payload and a subscriber for the same for second and third column ,Now while trying to use the router to render the content conditionally,i'm failing .
The router gets invoked only for the time page loads and second time the control does not even go the router ,can anyone tell me what is that I'm missing here to achieve the use case.
Jdev version :11.1.1.7.1
Thanks.
Contextual events are done in the view so once the event hit the taskflow, your router will already been evaluated and your contextual event gets passed on to the current view.
It doesn't make the TF to initialize again.
Something you could do, it when the events triggers inside the TF view, you need to fire an action which points to the router.
So in your event handler you just navigate to your router.
Have a look at this one for navigation: https://blogs.oracle.com/jdevotnharvest/entry/how-to_navigate_in_bounded_task_flows
If you tree is in the parent jspx page you don't really need contextual events to manipulate taskflows. Just pass required data as taskflow's parameter and set Refresh property to IfNeeded for your taskflow binding to rerun your taskflow when its parameters changed.
If your tree also resides in taskflow and its sibling taskflow for details view then you indeed need contextual event, that should be catched at the parent jspx page (or taskflow) and then follow approach I've described earler with only change that parameter will come not from tree directly, but from payload of event.
I'm building a dashboard/control panel app that is basically made up of two tabs (bootstrap) at the root level, called "dispatch" and "admin". Each tab has a good bit of its own multi-tiered navigation and functionality, and they don't need to directly interact with each other. The problem I'm running into is how to deep-link to sub-views within one of the tabs without losing the "state" of the inactive tab. To clarify, I can achieve this just fine if I don't worry about updating the URL, but when I try to add deep-linking, that's when I get stuck.
An example of the desired behavior:
When you click on the "Admin" tab, the route becomes "/admin"
Click on a sub-nav item, route becomes "/admin/foo"
Select 3rd-tier sub-level item, route becomes "admin/foo/thing1"
Click on the "dispatch" tab, route becomes "/dispatch"
Click back on the "admin" tab, route goes back to "admin/foo/thing1"
So basically, if you're at the "admin/foo/thing1" route in the middle of filling out a text field, then switch to another tab, then switch back, the text field should still be there just as you left it.
Like I said, the problem isn't switching from tab to tab, since by default the tabs just show and hide things on the page without reloading any views dynamically. I just don't know how to deep-link to a given tab's "bookmarked" position when you switch to it. The way I keep thinking of it is that clicking on a tab should only update the first segment of the URL(/admin or /dispatch), and then some sort of $watch function would update the remaining segments based on the last "location" within that tab. Would something like that work?
Also, I'm using ui-router to handle all my routing and states, so I have to factor that into how I'm going to handle the desired behavior.
Help?
I worked on both those topics (deep state reactivation and parallel states) and integration into ui-router. Grab my github fork of ui-router and build using grunt. Then, mark your two tab states as parallel: true and deepStateRedirect: true.
Git repo: https://github.com/christopherthielen/ui-router
Example plunker: http://plnkr.co/edit/YhQyPV?p=preview
Discussion: https://github.com/angular-ui/ui-router/issues/894
I would just save the current state in a variable, then either dynamically change the link of the tab to whatever the last subview was.
For example, if the user is on /admin/billing, the Admin tab would link to admin/billing. When they leave that tab, the /admin tab remains the same. If you are using ui-router, you can do this with ui-srefs. You could also just manually check the variable when the state changes, and route the user there from the controller.