angularjs ui-router dynamic ui-view name generate

[Marcin Szyszyński]

I'm quite new to angularjs

I have problem with dynamic generate ui-view names in ng-repeat

http://plnkr.co/edit/vQjqYCB6mR34MS3coc1H?p=preview

Is it possible to generate ui-view names in ng-repeat and then how to configurate routes to open details.item.html to ui-view="item{{itemId}}"

[Dan Kang]

I'm not sure if you're just experimenting or need to get things done but named views are not what you need, though I could be wrong.  What are you trying to do?

Named views are useful if you have multiple routes/states that need to plug different things into the same static structure.  Dynamically generating named views doesn't make a whole lot of sense (not even sure if it's possible though I haven't looked at the source) because they must already match existing static route/view definitions.

Dan

[Marcin Szyszyński]

I'm trying to do something like accordion with tabs.

i know how to do it with jQuery and AJAX but i'm learning Angular JS so i would like to know how to do it.

[Brian Marco]

Hey Marcin,

Hmmm.   Will the content within the tabs vary wildly based on the id of the item?  For example, based on your screenshot:

- Could the content for tab "detail 1" be very different from that of "detail 2"?  I'm thinking yes but correct me if I'm wrong.

- Could the content for tab "detail 1" for "3 item name" be very different from the content in tab "detail 1" for "2 item name" ?  I'm thinking not, but again correct me if I'm wrong.

I'm thinking you could use a combination of directives, each with their own template and controller to achieve what you need.  Your answers to the questions above would help to prove that out.

If you're curious take a look at Directives in the Developer Guide (http://docs.angularjs.org/guide/directive).  Specifically I'm thinking the "Writing directives (long version)" could help you out.  There is info there about the template and controller related to the idea I mentioned above.

Let us know how it goes.

--

B

[Dan Kang]

There are lots of ways to do this.  You don't need ui-view at all for this - why not use ng-include and ng-controller - this way you can load different templates depending on the item or apply conditional logic.  If you need to use routing, say, to make sure state transitions are recorded in history, you can use route parameters.  Also, ui-views don't have to be named - you can just do <div ui-view></div> and it will load the default view, which should be good enough for you.  As Brian mentioned, custom directives may be a more natural way to solve this.  With that said, to do this the way I think you intended, here's an idea:

http://plnkr.co/edit/bBSB9t?p=preview

[Marcin Szyszyński]

Thank you for all solutions

- Could the content for tab "detail 1" be very different from that of "detail 2"?  I'm thinking yes but correct me if I'm wrong. // TRUE

- Could the content for tab "detail 1" for "3 item name" be very different from the content in tab "detail 1" for "2 item name" ?  I'm thinking not, but again correct me if I'm wrong. //TRUE

I thought about directives but as I said i'm new in angularjs so I appreciate any suggestion.

[Marcin Szyszyński]

Of course, the content detail will be generated dynamically.

[Dan Kang]

Making sure, given this, you know how to do this now, right?

[Marcin Szyszyński]

Yes Thank you. That was what i need. I have another probelm but i write about it later. 

[Gabriel Kohen]

Hi,

Did you figure out how to dynamically create tabs with UI-Router views? I've tried using the Angular Material Tabs with dynamically generated ui-views. There seem to be a race condition where the ui-view of the state we navigate to does not update (Only the second time we navigate to the state).

Cheers.