Как связать допустимое значение td с ng-моделью

Question

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

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

В любом случае я могу передать это значение ng-модели из contenteditable td моему контроллеру? Заранее спасибо ребята

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 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. С Директивой

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

Эта Директива была первоначально получена: 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>