Question

我正在学习AngularJS。我遇到过无法解释的问题，也无法找到（或解决方案）的任何解释。

我有一个简单的AngularJS应用程序，我试图将<span contenteditable="true">绑定到一个值，但它不起作用。 EG：

<!-- Works as expected -->
<input data-ng-model="chunk.value"></input>

<!-- Shows value, but doesn't bind - changes not reflected in model -->
<span contenteditable="true">{{chunk.value}}</span>

<!-- This is empty -->
<span contenteditable="true" data-ng-model="chunk.value"></span>

如何使最后一个跨度使用双向绑定，以便编辑其值更新chunk.value，反之亦然？

Answer 1

<强>纳克绑定！在＆span;＆＃39;中使用ng-bind进行单向绑定。

请在此处查看示例：https://docs.angularjs.org/api/ng/directive/ngBind

所以你的行将是： <span contenteditable="true" ng-bind="chunk.value"></span>

希望这个帮助

Answer 2

要使ng-model使用可信的<span>元素，请使用自定义指令：

app.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);
        }
      }
    };
}]);

用法：

<span contenteditable ng-model="userContent">Change me!</span>
<p>{{userContent}}</p>

有关详细信息，请参阅

The DEMO

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

[contenteditable] {
  border: 1px solid black;
  background-color: white;
  min-height: 20px;
}

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<body ng-app="customControl">
 <span contenteditable ng-model="userContent">Change me!</span>
 <hr>
 Content={{userContent}}
</body>

Answer 3

ngModel赢得了@VtoCorleone指出的工作。 ngModel docs

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

您可以查看contenteditable directive。

否则，潜在的解决方法：拥有一个被调用的函数。然后该函数更新控制器中的$scope.chunk.value。它将照顾其他元素＆＃39;内容作为绑定得到更新。

我不确定您要使用的确切外观或功能，只是将其放在<textarea>内并将其设置为<span>（不是focus。边界或背景等）。然后当它在ng-model中时，您可以添加其他样式以了解它是否可以编辑。这种方式允许您使用{{1}}，因为它打算使用。以下是此方法的基本实现：Plunker

Answer 4

ng-model不适用于span。如果您绝对需要，可以为此编写自定义指令。该指令将在keydown,keyup contentEditable上设置span侦听器并更新范围模型（在$apply()内）。这会将span内容绑定到model。

我很快为你创建了plunker。看看这个。它将<span>内容与范围模型同步。打开浏览器控制台，以便在键入内容时查看范围模型更新。

Answer 5

将ng-model-options="{ getterSetter: true }"行为添加到附加了ng-model的元素。您还可以将ng-model-options="{ getterSetter: true }"添加到<form>，这会为其中的所有<input>s启用此行为。

示例显示如何将ngModel与getter/setter一起使用： demo page

AngularJS-ng-model在满意的<span> </span>上失败

5 个答案:

The DEMO