AngularJS create slidedown menu

Question

I'm building an AngularJS app, and basically I have a menu on top of my page then when I select an item is supposed to slide down some content of my page and show the menu in that area. I've read something about creating a directive but isn't still clear to me how can I do it. I show an example of my page:

Then when I select an item from the Menu, the static image disapears and gives place to a "sub menu" and the sub menu content itself.

In some cases, where the "SubMenu" + "Content" height is bigger then the height of the image, the rest of the content will slide down.

My main concern is how to show this SubMenu depending on the menu selected (in the black square). My idea was to create some menu template (with all the html and css created) and then just bind the different content to this template and show it on the div that I want (in this case the div that started with the static image). But since AngularJS is new to me I'm having some problems to put it in pratice.

Answer 1

你可以在这里看到plunker示例：

https://plnkr.co/edit/xJoF4IuDtJlGzWmTYoqZ?p=preview

以下是角度代码说明：

show collections

当更新菜单的内容时，您可以通过角度事件将此事件传达给指令，以便从服务中重新读取该指令。请参阅（https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope）获取$ on，$ emit，$ broadcast

菜单控制器的监听器示例：

show dbs