Hi guys,
I'm stuck on a design problem while building some directives in a open
source library.
I'll explain it with abstract name and simplified details to make it more
readable.
Let say we have 2 directives *A* et *B.*
*The A directive*
*A* only apply on <form> elements and take a attribute *mydirective-b-*
*instance*.
*mydirective-b-**object* should be an instance with a method
*getAttributes()* returning a Array like this : [ "name", "email", "phone",
...]
When applied to an element, *A* directive append to the iElement as many *B*
directive
element ( let's say <input *mydirective-a*>) as *mydirective-a-instance *
length*.*
So :
> // with *myInstance.**getAttributes() => *[ "name", "email", "phone"]
> <form *mydirective-a **mydirective-a-**instance*
> *="myInstance">*</form>
will a append three <input *mydirective-b*> to the <form> element like this
:
> <input *mydirective-b="name"*>
> <input *mydirective-b="email"*>
> <input *mydirective-b="phone"*>
*The B directive*
*B directive *only apply on <input> elements.
This directive *require a parent A directive* cause *B directive* needs
*mydirective-b-object
*instance.
Why ?
Cause *B directive transform the iElement *be adding it attributes.
B directive get attributes to add by calling the inherited instance from
parent *A directive like this : **myInstance.*
*getAttributeDefinition(<attributeName>)*
*Example :*
// with
// with *myInstance.**getAttributes() => *["email"]
// with *myInstance.**getAttributeDefinition("email") => *{ type : "email",
"my-another-directive" : "", class : "my-email-class" }
<form *mydirective-a **mydirective-a-**instance*
> *="myInstance">*<input *mydirective-b="email"*>
> </form>
should end with :
<form *mydirective-a **mydirective-a-**instance*
> *="myInstance">*<input *type="email"
> ng-model="myInstance.email" my-another-directive class="my-email-class">*
</form>
You can see my implementation of this design here :
- A directive
:
https://github.com/squareteam/angular-coq/blob/master/lib/directives/coq-model.js
- B directive
:
https://github.com/squareteam/angular-coq/blob/master/lib/directives/coq-model-attribute.js
More explanations one the expected behavior here
: https://github.com/squareteam/angular-coq/wiki/Coq-Directive
I've found a way to make it work by doing a double
*$compile(iElement)(scope)* but it cause issues with *ng-click* directives
that bind 2 times callbacks.
If any of you angular experts have a idea, it will be amazing !
Thanks a lot.
--
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.
