0

我有一个基于Craig Stuntz 的 javascript contenteditable placeholder 的带有占位符的 contenteditable 指令。该指令执行以下工作

  1. 检查 div textContent 是否存在，如果存在则隐藏占位符，否则显示占位符
  2. 如果用户关注 contenteditable 然后隐藏占位符

但我有一个 Craig Stunt 已经提到的问题

If you update the div text in JavaScript (instead of just typing into the div on the page), no events are fired, and you must let the plugin know that you've changed the contents by triggering the change event.

我不知道该放在哪里.triggerHandler('change')以及指令如何知道来自 javascript 的 div 文本是否为空？

下面是代码

app.directive("contenteditable", function() {
return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
        // view -> model
    element.bind('input', function() {
    scope.$apply(function() {
        ctrl.$setViewValue(element.text());
    });

    if (this.textContent) {
            this.setAttribute('data-contenteditable-placeholder', 'true');
            console.log(this);
        } else {
        this.removeAttribute('data-contenteditable-placeholder');
        }
  });
    // model -> view
    //ctrl.$render = function() {
  //    element.text(ctrl.$viewValue);
    //};
    //ctrl.$setViewValue(element.text());
    }
}
});

CSS

*[data-placeholder]:not(:focus):not([data-contenteditable-placeholder])::before {
  content: attr(data-placeholder);
  margin-left: 2px;
  color: #b3b3b3;
}

div[contenteditable]:focus{
  outline: none;
}
4

1 回答 1

1

我相信你快到了。

您只需要“观察”输入字段的值，就可以触发您的.triggerHandler('change')事件。

该指令应该 $watch() 你的模型进行更改，并且 watch 回调应该 1 - 检查 div 是否为空，2 - 调用你的触发事件（或任何 DOM 操作） - 你可以在下面看到伪代码。

scope.$watch('yourViewModel', function(newValue, oldValue) {

 // here you check if the newValue is empty

 // depending on the check above you call (or not) triggerHandler('change')

});

您可以看到第二个参数scope.$watch是接收模型的newValueandoldValue的函数，因此您可以在该函数内部测试是否newValue为空（因此检查 div 文本是否为空）。

希望这有助于或至少为您指明正确的方向。

于 2013-08-30T02:50:54.660 回答