0

I have a very simple webpage that is using Bootstrap3 + AngularJS1.2. The main page uses a fixed nav-bar with some Dropdowm menus.

Each menu item calls the same controller (the only thing that changes is the route parameter). The controller retrieves the data and returns always to the same view (which renders such data).

What I'd like now is how to display a "user-friendly" version of the collection name.

A very quick (and very, very dirty) way to do it could be: pass the view title as a request parameter, which the controller extracts and puts in the view model. Example: http://jsfiddle.net/gC64y/

What it really bad about this (IMHO) is that the title will be visible in the location bar. A cleaner alternative, I believe, would be to have a model in the parent scope that has an array like:

menu = [{'urlPath':'data/collection-first', 'title':'The First Collection'},...]

.. and then pass to the controller just the index of the array element corresponding to the clicked menu item.

However, before start playing with alternatives, I'm curious about what would be recommended way do this in the "Angular-way" (which I'm just learning, by the way).

Thank you,

Sebastian
  • 1,835
  • 3
  • 22
  • 34
  • Can you create separate views for each of action? i think it would be better way. – Nikhil N Feb 07 '14 at 05:30
  • There is a very nice answer already on a similar topic. http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view – Alexander Nenkov Feb 07 '14 at 06:26
  • @Nikhil: Yes, I could, however all of them would be exactly equal except for the title. True, the common part coud be factored out using ng-include (I believe...) but even after doing that the amount of extra lines and duplication doesn't feels right to me. – Sebastian Feb 07 '14 at 20:05
  • @AlexanderNenkov: nice tip, thanks. I see the cons of this solution similar to my comment above (in this case instead of duplicating the views, I would be duplicating the controllers). – Sebastian Feb 07 '14 at 20:08
  • So far, I'm inclined to use an array of "menuItem" objects in the parent ng-init (each item with properties such as title, url, etc.), passing the menu index to the controller, and then inside the controller use $scope.$parent.menu[idx] to retrieve it. I'll left the question open for some days waiting for alternatives. Maybe I should put this array in a service, and inject the service to the controller?) – Sebastian Feb 07 '14 at 20:10

1 Answers1

0

I have used what I mentioned in my commet above:

So far, I'm inclined to use an array of "menuItem" objects in the parent ng-init (each item with properties such as title, url, etc.), passing the menu index to the controller, and then inside the controller use $scope.$parent.menu[idx] to retrieve it

Thanks,

Sebastian
  • 1,835
  • 3
  • 22
  • 34