5

I'm just getting to grips with Angularjs and have seen the below in the documentation, how can I adapt this to use ng-bind-html as oppose to ng-model. I assume using both ng-bind-html and ng-model together would conflict?

angular.module('customControl', []).
  directive('contenteditable', function() {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if(!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html(ngModel.$viewValue || '');
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$apply(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if( attrs.stripBr && html == '<br>' ) {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  });

from https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

I am currently using the ng-bind-html directive as below (and works well although not two-way binding):

<div ng-bind-html="person.nameHtml" contenteditable="true"></div>
user3197788
  • 165
  • 4
  • 14
  • what would be a *contenteditable* element? – Sebastian May 03 '14 at 14:15
  • @Sebastian a collection of elements such as div, p, h1, h2 etc. – user3197788 May 03 '14 at 14:20
  • What's your reason for not using `ngModel`? – Michal Charemza May 03 '14 at 18:47
  • @MichalCharemza I need to display text as html I.e. Bold text if the value is hello – user3197788 May 04 '14 at 06:43
  • 2
    The [demo in the docs](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController) that uses `ngModel` allows this. It you highlight some text, hit ctrl + b (or cmd + b), the text should go bold. – Michal Charemza May 04 '14 at 06:47
  • @MichalCharemza see! Didn't realise. Thank you this has helped although I can't see the same behaviour with language characters such as French accent e's etc. I'm not sure if such characters without their appropriate html entity code would cause invalid html5? – user3197788 May 04 '14 at 07:57
  • Accented characters should work fine without their entity codes, assuming they are valid UTF8 characters (I'm not even sure HTML5 specifies a required encoding?). I've just pasted in "é" into the demo, and it's fine. There can be issues with some some characters outside of something called the Basic Multilingual Plane, like some Emoji characters, but that is where my knowledge ends... – Michal Charemza May 04 '14 at 15:08
  • You should post this as an answer... –  Jul 31 '14 at 03:12

1 Answers1

2

The answer, according to the comments on the question, is that you can use the ngModel directive:

<div ng-bind-html="person.nameHtml"
     contenteditable="true"
     ng-model="person.nameHtml">
</div>
  • 2
    Please note that when the div content any child element (lets say tag for ex ) , new characters will be insert left side instead of right side – Phung D. An Sep 02 '15 at 11:59
  • @Pham Huy Ahn could you provide some references about this behaviour? Because I have error with this on Firefox. – Bunyk Apr 25 '16 at 13:32
  • @Bunyk sorry dude, it was months ago.. but this one is messy. I suggest using invisible textarea + a div showing the result. That s how Facebook and everyone do. I did and it works so far – Phung D. An Apr 25 '16 at 18:11