Question

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

检查div textContent是否存在，如果存在hide hide place，则显示占位符
如果用户专注于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;
}

Answer 1

我相信你几乎就在那里。

您只需输入“watch”输入字段的值即可触发.triggerHandler('change')事件。

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

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的第二个参数是一个接收模型的newValue和oldValue的函数，因此如果{{1}您可以在该函数内部进行测试是空的（因此检查div文本是否为空）。

希望有助于或至少指出正确的方向。

将div文本传递给angularjs指令

1 个答案: