Separation of concerns with directives, services and controllers

[Ben]

Hi everybody

I have got a general design question, I cannot wrap my head around. 

It's about a panel manager (managing panels in a container). I want to be able to add / remove panels from anywhere in the web application and automatically re-render the collection in a directive. I'm using a directive to render the panels (instead of ng-repeat in conjunction with a controller), because when generating the panels I need to make CSSOM/DOM manipulations on the panels.

In an ideal world I would like:

• Accessing the Panel API for adding / deleting panels from anywhere in the app (perhaps using a service?)
• A directive for rendering the panels stored in the Panel API (with having access to the actual DOM element of the panel while creating)
• The directive can send updates to the Panel API (say the panel was closed, hence can be deleted)

Given that I want to nicely separate concerns, what would be an elegant way to implement this? Any pointers are appreciated! 

Best, 

Ben

[Sander Elias]

Hi Ben,

You need both, service(s) and at least 1 directive. The manipulation and de management should be put in services. 

the actual viewing of the data can be handled by the directive(s).

However this leaves you with 1 problem, what if you are calling the service, and the directive is not on the page yet?

Actually there are at least 2 ways to handle this. 

1. Is the simplest one. Throw an 'directive xxx not found' error and make it the responsibility off the developer.
   
2. Add it to the dom from your service. I know that this is a violation of the best practices, but in this particular case
   its acceptable in my eyes. Just make sure you document this behaviour very well, and you still might
   throw a warning! I would just append the needed directive to the page body, but it is you that makes this
   decision.
3. Let me know if you find a 'better' way. Really!

Does this help you?

Regards

Sander

[Benjamin Gröhbiel]

Hi Sander

Thanks for your input! It sounds that with a service/directive pattern this should be possible. 

Yet a few questions remain:

How can the service talk to the directive? Say in a page controller we added a panel to the service. How can we update the content of the directive? In other words, how do we propagate the changes in the model to the directive?

Additionally, when we catch a close event of a panel in the directive, how would you propagate the changes to the service? 

Will work on this today, if I come up with a nice solution I will let you know :)

Thanks!

Ben

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/tEXdzqUtR9Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Ben,

inject the service into the directive, and put an watch on the things you need to.

Regards

Sander