Contenteditable mit ng-model nicht funktioniert

Ich versuche zu speichern, den Wert einer contenteditable um meinen JS-code. Aber ich kann nicht herausfinden, warum ng-model funktioniert nicht in diesem Fall.

<div ng-app="Demo" ng-controller="main">
    <input ng-model="inputValue"></input>
    <div>{{inputValue}}</div> //Works fine with an input
    <hr/>
    <div contenteditable="true" ng-model="contentValue"></div>
    <div>{{contentValue}}</div> //Doesn't work with a contenteditable
</div>

Gibt es eine Abhilfe, das zu tun ?

Finden Sie unter : JSFiddle

Hinweis: ich erstelle ein Text-editor, so sollte der Benutzer das Ergebnis sehen, während ich bin die Speicherung der HTML dahinter. (dh. user sehen: "Dies ist ein Beispiel !", während ich store: This is an <b>example</b> !)

InformationsquelleAutor der Frage Elfayer | 2015-02-18

  1. 29

    contenteditable tag arbeitet nicht direkt mit Winkel - ng-Modell, weil der Weg contenteditable rerender das dom-element, auf jede Veränderung.

    Müssen Sie wickeln Sie es mit einer benutzerdefinierten Richtlinie für das:

    JS:

    angular.module('customControl', ['ngSanitize']).
directive('contenteditable', ['$sce', function($sce) {
  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($sce.getTrustedHtml(ngModel.$viewValue || ''));
      };

      //Listen for change events to enable binding
      element.on('blur keyup change', function() {
        scope.$evalAsync(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);
      }
    }
  };
}]);

    HTML

    <form name="myForm">
 <div contenteditable
      name="myWidget" ng-model="userContent"
      strip-br="true"
      required>Change me!</div>
  <span ng-show="myForm.myWidget.$error.required">Required!</span>
 <hr>
 <textarea ng-model="userContent"></textarea>
</form>

    Quelle, die er aus der original docs

    InformationsquelleAutor der Antwort Ben Diamant

  2. 5

    Bewegen Sie einfach die read-Funktion aufrufen $render

    angular.module('customControl', ['ngSanitize']).
directive('contenteditable', ['$sce', function($sce) {
  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($sce.getTrustedHtml(ngModel.$viewValue || ''));
        read(); //initialize
      };

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

      //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);
      }
    }
  };
}]);

    InformationsquelleAutor der Antwort goonerify

Schreibe einen Kommentar