zufrieden stellbar mit ng-Modell funktioniert nicht

Question

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

<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 einen Workaround dafür?

See: JSFiddle

Hinweis: ich einen Text-Editor erstellen, so dass der Benutzer sollte das Ergebnis sehen, während ich die HTML dahinter bin zu speichern. (. Dh Benutzer sehen: „Dies ist ein Beispiel!“, Während ich speichere: This is an <b>example</b> !)

Answer 1

contenteditable Tag wird nicht direkt arbeitet mit Winkeln des ng-Modell, weil die Art und Weise contenteditable rerender das DOM-Element bei jeder Änderung.

Sie haben es mit einer benutzerdefinierten Richtlinie wickeln dafür:

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 aus dem original docs

Answer 2

einfach die Lese bewegen Funktionsaufruf in $ 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); 
     } 
    } 
    }; 
}]);