1

In my app, I have a menu that is consistent across pages/view, and a sub menu that shows different links (to more nested child pages) for each main page/view. I am unsure how to approach changing the sub menu. For now, I have both the menu and sub menu in the body, as well as an ng-view element.

First I thought I'll make a controller for the sub menu and loop over an array of sub pages to display, updating the array as the main page/view changes. This seems cumbersome and unintuitive, though, as I'd have to keep a list of sub pages for each page in this separate controller, when really, they are part of the main page's/view's logic, no? Then again, I've read about the angular ui router and its implementation for nested views - should I rather approach the sub menu as a nested view?

I know SO cries to see my actual code, but I am more struggling with how to approach this problem, not with how to implement it. And it seems to me that something like a sub menu changing per page/view must be a common enough problem, that there is good recommendations for how to solve it.

Improve this question

3 Answers 3

Reset to default
1

I'm not sure I understand your scenario correctly - I'll assume a situation where there is a top-level navbar where each navbar item has a set of sub-items (a sub navbar). Also, each top-level navbar item represents a distinct functional area and consequently each has their own model. Hopefully that is close to your situation. Given that, I'd think that you could have a separate controller for each top-level navbar item (i.e., each functional area). Each of these controllers would be a child of your top-level controller, and each might have their own child controllers. Put another way, it might help you to think of your app in terms of distinct functional areas, and using the MVC pattern for each area. This might make it easier to reason about your app, and easier to write tests, as opposed to using a single controller to represent everything.

I hope that helps..

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

With this concrete problem I am having, the sub menu should always list whatever sub pages a page has, no matter how deep in the hierarchy the user is. I think your approach of trying to separate them as grouped by functional area is sound advice. In this case, I'd have the items that go into the sub menu as some kind of "attribute" of the main controller, yes?
Yes, that is generally what I had in mind. As a more concrete example of what I'm thinking, visit stackexchange.com/sites for an example. You could think of the options "All Sites", "Hot Questions", "Filtered Questions", etc., as distinct functional areas, each backed by their own controllers (also implying their own scope & model). Each may have their own menu options - for example, "All Sites" would have "All", "Technology", "Culture", etc.. You could represent that list as a property of the AllSitesCtrl (assuming that it is fairly trivial to handle user interaction at that level).
Seeing as my question is fairly vague on asking for help on a conceptual level, I think your answer helped me best when trying to categorize and approach this. I'll try implement different suggestions and see which feels like it fits best for this case.
1

It's a good question. I think that for major flow use the route and for inner panels use widgets. create directives that compiles templates. I built a dynamic widget you can read about it in here

Improve this answer

1 Comment

So basically you suggest adding a directive that renders the sub menu and it would update based on $location changes, for example?
1

You could use a ngShow directive for each sub-menu, with code to decide whether it should show or not. You would probably need a different function for each sub-menu which may or may not be shown.needs to be hidden.

Improve this answer

1 Comment

This is an option, but it feels more like trying to get around the problem rather than solving it. Thanks for the suggestion nonetheless.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.