I did something similar to an amalgamation of your two options, with
really good success. I was using angular-ui-bootstrap tabs, which have
sort of a messy API in that the directives expose many more scope
variables than seem necessary, and it is actually pretty easy to set
things up in a way that would generate conflicts.
What I ended up doing is only exposing a single boolean value to the
directive, that it is free to manipulate:
https://github.com/sonnym/fics_web_interface/blob/master/app/templates/chat.ejs#L1
I put all the logic for how tab changes are handled down in the service
layer:
https://github.com/sonnym/fics_web_interface/blob/master/app/assets/js/fics.js#L21-L28
https://github.com/sonnym/fics_web_interface/blob/master/app/assets/js/factories/chat.js#L62-L79
And I wrote an abstraction that observes changes propagated from the
directive and just does the right thing:
https://github.com/sonnym/fics_web_interface/blob/master/app/assets/js/factories/tab_manager.js
https://github.com/sonnym/fics_web_interface/blob/master/app/assets/js/factories/activity_notifier.js
It leverages Object.defineProperty to define the "active" state, which
allows for methods to be hooked into the changing of that boolean with
ease. I wrote about that methodology here:
https://sonnym.github.io/2015/01/21/using-defined-properties-for-better-angularjs-directives/
I hope that is somehow informative!
- Sonny
On 03/27/2015 12:18 PM, John Urberg wrote:
I have many cases where a directive I'm creating needs to provide
methods a controller can call. For example, I need to implement a
reusable dialog and supply an open method a controller can call to
open the dialog. I may also need to register a listener to my
directive to get a callback when an event occurs.
What I'd like to do is treat my directive as a component and define an
API to it. My API should have read only input parameters, methods the
directive makes available and a way to regiser callback methods. It
doesn't seem that Angular 1.x provides an easy way to do this. Here
are some options I've tried:
1) Provide an 'options' object to the directive. The options object
is created in the controller and any callback methods are added, as
well as any paramters. The directive will add methods to the options
object that the controller can call. I've seen this used in a few
examples on the web. It makes for a simple interface to the directive
but the API is not easy to determine when you see a directive used in
a template. Example: http://jsbin.com/muluko/2/edit?html,js,output
2) Use isolated scope values. Input parameters are either string or
two-way scope variables. API methods are two-way scope parameters;
the controller provides the name of the scope variable and the
directive sets it. Callbacks are either two-way or function scope
variables which the controller can pass a method to call. Example:
http://jsbin.com/lijuso/4/edit?html,js,output
What are your thoughts on these options? Are there other better ways
to acomplish this?
Thanks,
John
--
You received this message because you are subscribed to the Google
Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send
an email to [email protected]
<mailto:[email protected]>.
To post to this group, send email to [email protected]
<mailto:[email protected]>.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
