Extending a directive

66 views
Skip to first unread message

scarlatine

unread,
Mar 26, 2014, 6:55:26 AM3/26/14
to ang...@googlegroups.com
Hi,
I am a beginner with AngularJS. I would like to add an icon on the left of the title of a wij-dialog from Wijmo. It is possible with jQuery:
$(".ui-dialog-title").html("<img style=\"margin-left: -.75em; margin-right: 0.5em\" width=\"16\" src=\" sendEmail.ico \" />" + $(".ui-dialog-title").html());

I think it should be possible to add a directive (dialog-icon) in the wij-dialog directive, something like that:
<wij-dialog title="Please confirm" dialog-icon="sendEmail.ico" />
The trouble is that I don't know how I can get the generated HTML by wij-dialog to use it in my directive to add the icon. I wrote a plunk based on a test I wrote (a directive that changes the title of another directive).
Can someone tell me how to do this with a directive or a better way to extend an existing directive?
Thanks...


Luke Kende

unread,
Mar 28, 2014, 3:40:08 AM3/28/14
to ang...@googlegroups.com
Unfortunately, your new directive doesn't know about the existing wijmo directive and vice versa.  You might ask the guys at wijmo for a solution.

scarlatine

unread,
Apr 3, 2014, 3:59:37 AM4/3/14
to ang...@googlegroups.com
Hi,
Thanks for your answer.
It seems strange that if I have a directive there is no way to modify the generated HTML added to the DOM using another directive or anything else. I think there are use cases where you want to add or remove some HTML tags generated by a directive that you cannot or don't want to modify.
Bye...

P.S.: The jQuery solution was the answer from the guys at Wijmo. But I would like to find an elegant way to use it.
 

Luke Kende

unread,
Apr 3, 2014, 12:45:03 PM4/3/14
to ang...@googlegroups.com
Yes you can use another directive to do it, but timing of the wijmo directive's rendering is the challenge.  You'd have to create a $watch function do you know when their directive has created the element and then modify it with jquery in your directive.  Does that make sense?  


--
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/tfG9VDpHQeg/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.

scarlatine

unread,
Apr 8, 2014, 11:34:39 AM4/8/14
to ang...@googlegroups.com
Hi,
Thanks again for your answer.
I have read about the $watch function, but it seems to work with a controller and a scope. I have certainly missed something. Are you meaning that I can monitor the change in the tag replaced by the wij-dialog? 
I have found this about decorating a directive, it sounds perfect for my needs, but it doesn't work. I don't know why the function in wijmo.config is never called (plunk).
Another solution is to bind a function to the open event of the wij-dialog and use it to change the generated HTML. But the function is never called (another plunk).
I am stuck.
Bye...



Reply all
Reply to author
Forward
0 new messages