Question

我在AngularJS中有一个表单。在表单中，我有一个名为“description”的字段。如果用户输入描述为：

这是描述：

1）第1点

2）第2点

我将其保存为：

"This is description:<br/>1)point 1 <br/> 2)point 2"

现在保存后，要在页面上显示，我使用的是：

 <span class="summary"><em ng-bind-html="(x.DES)"></em></span>

此代码正常运作。

如果用户点击记录，那么我将以编辑模式加载表单：

表单行处于编辑模式以显示说明：

 <textarea  ng-focus="onFocusDescrption()" maxlength="600" name="cepDes" class="form-control" rows="3" cols="16"  ng-model="description" ng-disabled="isDescDisable" placeholder="Enter a description ..." id="description"></textarea>

现在问题来了。在控制器中，我将模型值设置为：

$scope.description = $scope.timeEntry.DES;

$scope.timeEntry.DES中的哪个位置有保存的值。该值显示在具有<br>的文本区域中。

Answer 1

似乎无法在textarea中使用标记，正如您在我创建的plunkr中所看到的，以及此post中的更多信息。解决方案是使用允许可编辑内容的指令。这样您就可以使用div进行显示和编辑：

<div ng-bind-html="modelname"
         contenteditable="true"
         ng-model="modelname">
</div>

指令（也是on github）：

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

Angularjs中的新行问题

1 个答案: