Js水印插件集成到AngularJs指令中

Question

你好社区已经暂时停留在这个......

情境： 我在表单上使用AngularJs，我想使用水印jquery插件

我尝试了什么：指令代码 （假设 myApp 已经定义，并且watermark.js脚本参考已经已添加）

myApp.directive('watermark', function(){
    return{
        restrict: 'A', //make this directive an attribute
        link: function(scope, element, attr){
            $(element).watermark(attr.watermark);
        }
    };
});

然后我在html中使用这样的指令

<input type="text" data-ng-model="someModel" data-watermark="Required Field"/>

现在发生的事情很奇怪，水印文字显示但是作为输入文本 当我专注于文本框时，水印文本不会消失，而是我最终在输入上的“必填字段”文本的顶部添加文本。

欢迎JSFiddles：D

谢谢大家！