I am using tabstrip and angular UI routing to navigate those tabs. When I click on the tab, its URL changes but the tab does not switch.
I have 3 tabs. The first 2 tabs work as expected. But the last tab does not switch even though its URL changes.
Here is my code.
Please let me know if you need further information.
It appears you have the k-state-active class set on a particular li, since you're using ui-sref you can use ui-sref-active="k-state-active" on all the li elements instead of the class you have on the first, the ui-sref-active state will apply the https://github.com/angular-ui/ui-router/wiki/quick-reference#ui-sref-active
Related
I have a problem with a custom directive that I wrote to simulate a tab view in angular.
This directive has only a method to redirect from a state to another.
This directive works fine.
The template of the directive is a div with a uib-tabset and some tabs that contain the views to show them.
This works fine.
Now I need this feature: from a view in a tab, I need to change view with a state.go(view) and I must also go to the tab which contains that view.
I tried different solutions that I found here or in other forums, but probably my requested feature is different from others.
Thank you.
I resolved with the answer in this link.
Sorry for my repost.
Angular UI bootstrap tabs - Can't change tabs with a button inside a tab
Please check this plunk for the issue I am explaining below.
When you run the plunk you will observe that there are certain tabs. The first tab Home belongs to home state. The remaining tabs belong to category state each tab identified by a category ID.
When I am currently on Home tab and I click on some other tab, the CategoriesController is invoked just once as expected. But when I click on some other tab from there the CategoriesController is invoked multiple times, once for the previous tab and twice for the newly selected tab. Please run the plunker and observer the browser console to better understand it.
I do not know why the controller is invoked for the previous tab also. Any help would be appreciated.
Not sure about the reason of invoking controllers multiple times. I'm trying to figure out the problem but till then you can do the following:
Remove controller: "CategoriesController" from the state configuration
Add ng-controller="CategoriesController" to the ui-view="categories" element
This will work for now since only that view -> controller will be invoked which is active.
Edit:
Got the problem, you have the ui-view="categories" in each tab so n number of ui-view are being rendered for n number of your tabs.
Now what is actually happening, to provide the slide animation, Angular material is keeping the left and right tab available in the DOM as well.
So when you are clicking from Home (i.e. first tab) to another tab, it's working fine. But when you are going from any other tab (other than 1st tab), it's respective left & right tab are coming into action as well since the sliding effect needs to be performed.
U are changing seletedTab value in your CategoriesController and $stateChangeStart $watcher.but at the same time u are using ui-view with ng-if which need the seletedTab as a parameter.
Say currently u are on tab 0, and switching to tab 1. And Things happens like this:
First of all, ur state change start.In the $stateChangeStart watcher, the selectedTab is set to 1.
The ui-view in tab 0 is removed from DOM.
The ui-view in tab 1 is added to DOM, but currently the $stateParams.catID is still 0.In this way, it initiated the CategoriesController with $stateParams.catID = 0. And at the same time, it set the seletedTab to 0. This is the first invoke for previous Controller
The ui-view in tab 1 is removed from DOM and ui-view in tab 0 is added to DOM.
Then ur $state changed successfully. The ui-view in tab 0 inited the CategoriesController with $stateParams.catID = 1 and set the seletedTab to 1.This is the first invoke for next Controller
OK now the ui-view in tab 0 is removed and the ui-view in tab 1 is added to DOM again and finally inited the CategoriesController with $stateParams.catID = 1. Everything looks OK though. This is the second invoke for next Controller
Hope i made it clear.
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 learning Ionic and I am stuck in one place because I want to change my default tabs layout to other one.
When I change to state where I reload my tabs layout, in new layout there is always selected second one, no matter what I do... I want first tab to be selected.
Here is plnkr. Go to friends, click one and look on tabs at bottom. Second one is active :(
$ionicTabsDelegate is not working (Or I have done something wrong)
http://plnkr.co/edit/AGNLaMqY6Hzbm5SVcgwI
Do you have any ideas why it's happening?
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.