javascript - 如何从angularjs中的可编辑div中获取内容

Question

我正在尝试从可编辑的 div 中获取内容。但我一直坚持为它实现 Angular 模板。

我不确定如何将模型数据从 html 模板映射到 Angular Controller 。

<div ng-repeat="todo in todos">                 
    <div class="todo.id" ng-model={{ ? }} contenteditable="true">
        <pre>{{ todo.text }}</pre>                          
    </div>
    <button type="button" class="btn btn-link"
        ng-click="editTodo(todo.id)">Edit</button>
</div>

我想传递我下面的任何文本

<div class="todo.id"></div> 

由于我的 div 在 ng-repeat 下，我无法将 ng-model 设置为一个范围变量。

在“ng-model={{ ? }}”中我应该有什么？或者是否有针对这种情况的解决方法。

请指导我。

Answer 1

要使 div 内容在 Angular 中可编辑，您需要创建一个 contenteditable 指令。

这里的 Angular 文档中有一个例子:

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#custom-control-example

以及 Gabo Esquivel 关于此主题的精彩博客条目: http://gaboesquivel.com/blog/2014/in-place-editing-with-contenteditable-and-angularjs/

正如您在 Gabriel 的示例中看到的那样，此类指令的代码将如下所示(我添加了一些注释以更好地理解发生了什么):

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

      //read the text typed in the div (syncing model with the view)
      function read() {
        ngModel.$setViewValue(element.html());
      }

      //render the data now in your model into your view
      //$render is invoked when the modelvalue differs from the viewvalue
      //see documentation: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#
      ngModel.$render = function() {
        element.html(ngModel.$viewValue || "");
      };

      //do this whenever someone starts typing
      element.bind("blur keyup change", function() {
        scope.$apply(read);
      });
    }
  };
});

祝你好运!