2016-05-19 7 views
0

NG-ぼかし、NG-フォーカスイベントがこのディレクティブを使用するとng-changeをバインドできませんか?

を作業しているが、NG-変更のcontentEditableのdivのために働いていません。

divを編集可能に変更しました。これはtextareaのように反応する必要があります。

私はcontenteditable divを使用しました。私は実用的な解決策を見つけるのを手伝ってください。

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(readViewText); 
       }); 

       // No need to initialize, AngularJS will initialize the text based on ng-model attribute 

       // Write data to the model 
       function readViewText() { 
        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); 
       } 
      } 
     }; 
    }) 
+0

「** NGO **は** contenteditable div **のために働いていません」とはどういう意味ですか?この[DEMO on JSFiddle](https://jsfiddle.net/ovr9uLur/)ではうまくいきます。 – georgeawg

答えて

0

ngの変更は、それがdivで使用することができますinput<select><textarea>要素で動作します。

は、このリンクに<input><select>、および<textarea>によってサポートされているw3schools

構文

<element ng-change="expression"></element> 

を参照してください。

関連する問題