如何在 angularjs 中创建水印指令？答案

【问题标题】：How do I create watermark directive in angularjs?如何在 angularjs 中创建水印指令？
【发布时间】：2016-02-12 06:26:05
【问题描述】：

我有一个简单的应用程序，它使用 jquery 为文本框添加水印。我编写了一个非常简单的指令来使用该水印，因此我可以将其应用于输入元素，但它不起作用。如果我停止调试器，我可以看到添加了水印。但是，当 UI 完成加载时，水印已经消失了。

app.directive('ngWatermark', function(){
    return {
        restrict: 'A',
        link: function ($scope, $elem, attrs) {
            debugger
            $elem.watermark(attrs.ngWatermark);
        }
    }
});

使用指令的标记代码。

<input ng-watermark="Search Companies" />

这似乎应该可行，但我还没有运气。任何人都可以填写我可能出错的地方吗？

我现在还注意到，如果我给文本框焦点并再次离开，水印会按预期显示。

最后，我可以通过指令中的 setTimeout 获得预期的行为，但我更愿意解释内部发生的事情。

// HACK that makes it work
... 
setTimeout(function() { $elem.watermark(attrs.ngWatermark); }, 10);

【问题讨论】：

我不了解 AngularJS，但您是否有不能使用 HTML5 占位符属性的原因？ davidwalsh.name/html5-placeholder
实际上，我对 HTML 5 并不了解，但这听起来很完美。不过理解起来会很有用。

标签： javascript jquery angularjs

【解决方案1】：

这是因为您的指令是在 DOM 元素完全呈现之前执行的。取决于watermark JQuery 插件的内部工作，它无法使更改在此阶段生效。

当您使用$timeout 时，执行被推迟到 JS 在 DOM 完成时获得喘息空间。

有关示例，请参阅this 文章。

【讨论】：