These are the premises I'm trying to implement with ui-router:
The root page has a ui-view; on click it is populated with the main page (main.html).
The main page has two named ui-view's: view1 and view2.
The main page also has four links to populate (1) page11 or page12 in view1, (2) page21 or page22 in view2 (in any combination).
I use abstract states to be able to select which page goes to its respective named view.
I posted my attempt on plunker, any ideas if this is achievable?
UPDATE
I think this plunk explains more clearly what I'm trying to achieve. Click on page11 and then on page21; each will display their template and clear the other. I need both templates to be shown simultaneously.
This is how I solved this problem: I created a directive that compiles markup (using $compile) and used two directives in my html page, each with a different markup.
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
I have a menu navigation bar that is made of several accordion widgets, and uses ng-include to include every section of the menu separately.
Some of these sections contains sub-sections that are also included through ng-include.
The first level accordion successfully uses the
$rootScope.on('$stateChangeSuccess')
to open the corresponding section based on the url, so that for example if the user opens a page that is supposed to have a certain accordion opened, it will automatically open even if you reload the page or share the link. I used the same code in the inner controller to sync the inner accordion as well, but to no avail. It appears that the second controller is initialized after the event was already fired. Is there a way I can fix this?
I'm taking my first steps with angular, looks promising but i have some issues, hope someone can help.
i have a long html page divided to sections
each section is an anchor tag, you can navigate to it from top menu.
the content in each section changes according to some parameters the user selects.
so the 3rd section's content for instance can be different(template) each time.
my problem:
i would like to dynamically load views into the section.
as i understand it i have only one ng-view that corresponds to specific rout.
how can i load a view (template+controller) dynamically as the user slides to the anchor tag?
thanks
Need to create nested tabs.
In a page there will be multiple Person id tabs as outer tabs and on clicking each tab it will open inner tabs like Home,Office etc., and on clicking inner tab - Home, the tab content will display.
Outertab: Person 1 Person2
Innertab: Home Office
Refering the site - http://angular-ui.github.io/bootstrap/ , created outer tabs with content. created 2 separate tabset but not able to give link between the two tabset.
Can someone help me how to write directive for nested tabs? Any reference links?
I believe that AngularUI Router is what you are looking for. The majority of UI-Router's power is in its ability to nest states & views. Follow the link I've provided and take a look at the section Nested States & Views.
This Plunker example incorporates AngularUI Router to achieve a similar functionality you are looking for.
[EDIT]
This layout composed of nested views is exactly what for the AngularUI Router is used for:
So TabsTemplate will dynamically render the first level of tabs (any number).
TabTemplate could be a template without any dynamic content as Home and Office tabs are always there.
OfficeTemplate and HomeTemplate are again templates that are populated dynamically based on the selection of the current person.
You can refer to how angular bootstrap tabset directive is written.
Reading the tab code helped me understand how directive work. Now I can build many components from the ground up.
I build myself a simpler version of the tabset directive, it doesn't render the content, just the tab-heading element. So I can decide what inside the content via a tab selected callback. And for nested tabs, I just need to put in another tabset directive.
I have a use case to toggle the view of a form using a button. The button is not nested in the same structure of the form, and is out side the scope of the forms controller.
What is the best way to have this toggle button comunicate to the contents controller to display this content?
I have had a similar problem and for advanced comunications between controllers i would recomend a service. A service can be injected into multiple controllers so they can share information & state.
However if all your after is something like a button that you can place anywhere that will show the form, you could consider using the $location.path?
eg. on a view with a list of users
www.example.com/users
append edit
www.example.com/users/edit
then have the form controller watch the $location.path and open itself when it see's edit ?