Как связать contenteditable значение TD в нг-модель

Question

Привет у меня есть следующий тд элемент:

<td ng-model="name" contenteditable='true'></td> 

Есть в любом случае я могу передать это значение нг-модель из contenteditable тд в мой контроллер? Спасибо заранее ребята

Answer 1

Связывание с contenteditable не построен, но вы можете написать простую директиву, которая будет выполнить задачу.

app.directive("contenteditable", function() { 
    return { 
    restrict: "A", 
    require: "ngModel", 
    link: function(scope, element, attrs, ngModel) { 

     function read() { 
     ngModel.$setViewValue(element.html()); 
     } 

     ngModel.$render = function() { 
     element.html(ngModel.$viewValue || ""); 
     }; 

     element.bind("blur keyup change", function() { 
     scope.$apply(read); 
     }); 
    } 
    }; 
}); 

Примите к сведению, однако, что в Internet Explorer, contenteditable не может быть применен к TABLE, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD или TR элементов непосредственно; содержимое редактируемого элемента SPAN или DIV необходимо разместить внутри отдельных ячеек таблицы (см. http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx).

Answer 2

1. С угловой contenteditable

Использование угловых contenteditable https://github.com/akatov/angular-contenteditable.

Это может получить значение из contenteditable элементов

<div ng-controller="Ctrl"> 
    <span contenteditable="true" 
     ng-model="model" 
     strip-br="true" 
     strip-tags="true" 
     select-non-editable="true"> 
    </span> 
</div> 

2.With Директива

Как вы можете использовать это Directive для него.

Эта директива была первоначально получена: http://jsfiddle.net/Tentonaxe/V4axn/

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="customControl"> 
 
    <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> 
 
</div>