angularjs and jquery watermark - I can't get them to work together

Hi,
I have a site that has some parts that use angular.  I am trying to implement the jQuery watermark using an angular directive.  I have a sample Plunk that shows the jquery watermark working by itself (no-angular), an angular directive working by itself (no jquery watermark) and finally a directive that uses the jQuery watermark which does not work.

I think I am almost there, but I can't figure it out.

http://plnkr.co/edit/hja76HVjtADb9tkke22A?p=preview
jackjohnson44Asked:
Who is Participating?
 
Ioannis ParaskevopoulosCommented:
To be honest the answer was not obvious to me, though i had used it in the past.... :-)
You may wrap element with $():

$(element).watermark("watermark");

Open in new window


Modified Plunkr

Giannis
0
 
Ioannis ParaskevopoulosCommented:
Hi,

Indeed you were almost there. Actually your code works fine, but you messed the order of your libraries. Though angular is not dependent on jquery (it uses jquery lite which is a subset of jquery), if you ARE going to use it then you should define it before angular.

Also, since your script js is dependent on jquery watermark, you should first define watermark and then your script.

My advise would also be to let your scripts be defined lastly on your body section. This way you may avoid using $(document).ready .

Check this modification of your plunkr (i only changed the script order).

Giannis
0
 
jackjohnson44Author Commented:
Thanks!

This is actually for a much larger project and I created the plunk because I can't make the available.  Do you have any idea how I could get it to work if I couldn't change the order?  There is a whole bundling thing going on that I don't really control.
0
 
jackjohnson44Author Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.