Question

我有一个简单的应用程序，它使用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);

Answer 1

这是因为您的指令在DOM元素完全呈现之前执行。根据{{1}} JQuery插件的内部工作原理，它无法在此阶段使更改生效。

当你使用watermark时，执行被推迟，直到JS在DOM完成时获得喘息空间。

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

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

1 个答案: