Pass div text to angularjs directive

Question

I have a contenteditable directive with placeholder which based on Craig Stuntz's javascript contenteditable placeholder. This directive does the following job

Check if div textContent exist, if exists hide placeholder else show placeholder
If user focus on contenteditable then hide placeholder

But I have a problem which already mentioned by 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.

I have no idea where to put .triggerHandler('change') and how the directive know if div text from javascript is empty or not empty?

Below is the code

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;
}

Any chance you could post the final solution for this?

chris
– chris

2013-12-05 04:47:59 +00:00
Commented Dec 5, 2013 at 4:47 — chris
– chris, Commented Dec 5, 2013 at 4:47

Denison Luz · Accepted Answer · 2013-08-30 02:55:56Z

I believe you are almost there.

You just need to 'watch' the value of the input field so you can trigger your .triggerHandler('change') event.

The directive should $watch() your model for changes, and the watch callback should 1 - check if the div is empty and 2 - call your trigger event (or any DOM manipulation) - you can see pseudo code below.

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')

});

You can see that the second argument of the scope.$watch is a function that receives the newValue and oldValue of your model, so you can test inside that function if the newValue is empty (therefore checking if the div text is empty).

Hope that helps or at least points you to the right direction.

Collectives™ on Stack Overflow

Pass div text to angularjs directive

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related