I am new to AngularJs and I am trying to implement this unique scenario and facing a design challenge.
I have created a menu nav bar in my app with the help of UI router.
Lets say there are 3 states in my application as represented.
The challenge is that I want to display state C as a modal or as a normal view depending upon how it is being navigated to.
If state C is navigated from the menu, I want to display it as a modal.
If state C is navigated from a specific point in the app, it has to be displayed as a normal view with some additional elements.
I am trying to use just a single template and a controller for both modal and the regular view.
I am using $modal service provided by angular ui bootstrap.
I would like to add that state C has a UI grid which gets its data populated from a rest service.
I have tried things like using non url params in state, or using resolve to pass param to modal and using a separate controller for modal but do not know if it is the right approach without causing code redundancy.
I would appreciate if anyone can point me in the right direction.
I would love to post the code, but at this point I see it more as a design problem.
why not just create a html partial - which is your template, and reference it from both ui-router as templatePath and from the $modal as described here http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service.
I think however that the right approach is to create a custom directive - representing the content of tab3 or the modal. Directives are angular's way of reusing and encapsulating code. Once you have that directive - that is, let's say it is called then referencing it from ng-view is simple. The template (no need for templatePath) just becoms: and also the same when referenced from $modal.
Hope that helps.