1

So I've been going round and round trying to figure out the best way to have a footer that has a hidden panel for actions that slides up. The site is pretty basic, it has a header, content area and footer. I made a simple wireframe to explain this a bit easier:

Layout

So ideally the content panel are say something like posts, when clicked I would like to open the Secondary actions panel with the edit form prepopulated with the data from the content panel. If the Icon is clicked I would like to pop that same Secondary actions panel with a blank add new post form. Where I struggle with this is the convention of how to do this and what is the best via AngularJS. The secondary actions panel and footer are wrapped within a FooterController, but the content panels are wrapped inside a separate controller. I'm not sure whether I should be using a directive or a service.

I'm currently utilizing angular-ui-router but this doesn't manage the ui events that I need to happen.

Any advice would be greatly appreciated, I'm very knew to AngularJS so I'm trying to learn the right way of doing things with AngularJS rather than just building some hacked up crap that I'll end up scrapping later on!

Thanks!

Tom Bird
  • 999
  • 3
  • 17
  • 31

1 Answers1

0

I think secondary panel should have its own ui-view (with its own controller) instead of staying inside the footer.

For it to know which item has been clicked, you can pass through the ui-router state.

Let's say your control panel has post id 1234, then it should have a ui-sref="stateName({postId: post.id})"

And this state in ui-router will specify which controller/template it should fire, and inside that controller you can get the id from $stateParams.postId

You can then use the post id to get the post either remotely or from service if you have stored them earlier.

Icycool
  • 7,099
  • 1
  • 25
  • 33
  • Hi, can u pls help me in this.. http://stackoverflow.com/questions/31560652/angularjs-page-redirecting-to-some-other-page-in-angular-js-while-trying-to-ge – AngularAngularAngular Jul 23 '15 at 07:20
  • Hey thanks @Icycool I will give that approach a try, by chance do you know of any articles with similar code I could use as an example? – Tom Bird Jul 23 '15 at 22:47
  • You can refer to the [sample app in ui-router](http://angular-ui.github.io/ui-router/sample). It uses the same approach in state `contacts.detail` (code is under `ui-router/sample/app/contacts/contacts.js`). – Icycool Jul 24 '15 at 03:32