Contenteditable z ng-model nie działa

Question

Próbuję zapisać wartość contenteditable do mojego kodu JS. Ale nie mogę się dowiedzieć, dlaczego ng-model nie działa w tym przypadku.

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

Czy istnieje obejście tego problemu?

Patrz: JSFiddle

Uwaga: Tworzę edytor tekstu, więc użytkownik powinien zobaczyć wynik, a ja przechowywania HTML za nim. (Tj. Użytkownik patrz: „To przykład!”, A ja przechowywania: This is an <b>example</b> !)

Answer 1

tag contenteditable nie działa bezpośrednio z NG-modelu kątowym, ponieważ droga contenteditable rerender elementu DOM na każdej zmianie.

Trzeba owinąć go z dyrektywy niestandardowym za to:

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> 

Źródło go z original docs

Answer 2

Wystarczy przesunąć odczytu wywołanie funkcji w $ 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); 
     } 
    } 
    }; 
}]);