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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jackjohnson44Author Commented:
Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.