javascript - 如何在 contenteditable 中对多个对象进行 AngularJS 2 向绑定(bind)，包括周围的文本

Question

我想要一个像这样的集合:

var array = [{innerText: "I was with ", index:0},{obj: "Mary", id: 1, index:1}, {innerText: " and ", index:2},{obj: "John", id: 2, index:3}]; 

和一个内容可编辑的 div这将包含所有这些但绑定(bind)到数组，以便当我更改 innerText 或表示对象的输入时，数组将相应更新。

例如，如果没有 angularJS 的东西，div 会看起来像这样:

<div contenteditable="true">
I was with <input type="text" value="Mary" data-index="1"/> and <input type="text" value="John" data-index="3"/>
</div>  

这应该与 div 中的退格键以及要插入的新输入或要键入的文本一起使用，从而相应地更新数组。

我知道我可能必须使用 Mutation Observers，但我不知道如何在这个复杂的示例中使用。我希望 AngularJs 与变异观察者有更多的自动化集成:/

我的原始方法是:我为整个集合制定了一个指令，为 innerText 制定了一个指令，为对象制定了一个指令。输入与对象名称的绑定(bind)当然有效，但当 contenteditable 的内部 DOM 发生突变时则无效。同样将 {{innerText}} 作为 innerText 的模板并在 contenteditable 中使用它并不能保证有人会实际输入它以便绑定(bind)起作用(而不是在它之前或之后)

编辑:如果它使具有相同 contenteditable 的集合变得更容易，仍然非常有用

var array = [{obj: "Mary", id: 1, index:1}, {obj: "John", id: 2, index:3}, {innerText: "I was with @ and @"]; 

Edit2: 重新打开问题。以前接受的答案方法非常好，但今天我意识到它不是真正的双向绑定(bind)。它实际上是单向绑定(bind)。从 View 到模型。如果使用所提供代码的更新版本(来自先前接受的答案)来获得类似

modelValue": [
    {
      "innerText": "abc",
      "index": 0
    },
    {
      "obj": "abc",
      "index": 1
    },
    {
      "innerText": "abc",
      "index": 2
    }
  ]

这将使 View :

"viewValue": "\n abc\n <input type=\"text\">\n abc\n "

该解决方案必须为服务提供代码，该服务将在按下新按钮时返回如上所示的静态模型，以及 Controller 中的函数，该函数将模型值放入范围内，模型将转换为上面的viewValue。

Edit3:根据下面更新的答案，这里是真正的双向绑定(bind)如何在没有建议 $watch 的情况下使用编译前链接和后链接工作:

// Code goes here

var myApp = angular.module('myApp', []);
myApp.controller('test', ['$scope',
  function($scope) {
    $scope.addInput = function() {
      //Put in a directive if using for real
      var input = document.createElement('input');
      input.type = "text";
      $(input).attr("data-label","obj");
      $(input).attr("data-name","");
      $(input).attr("data-id","randomId");

      document.querySelector("div[contenteditable]").appendChild(input);
      input.focus();
    }

  }
]);

myApp.directive('contenteditable', ['$compile', function($compile) {
  return {
        require: 'ngModel',
        controller: [
            '$scope',
            function($scope) {

                 // Load initial value.

                $scope.getViewValue = function() {
                    var tempDiv = document.createElement("div");
                    angular.forEach($scope.model.modelValue, 
                        function(obj, index) {
                            if (obj.innerText) {
                                var newTextNode = document.createTextNode(" "+obj.innerText+" ");
                                tempDiv.appendChild(newTextNode);
                            } else if (obj.name) {
                                var newInput = document.createElement('input');
                                newInput.setAttribute('data-id',obj.id);
                                newInput.setAttribute('data-label', obj.label);
                                newInput.setAttribute('autosize', 'autosize');
                                newInput.setAttribute('data-name', obj.name);
                                newInput.setAttribute('value', obj.nickname);
                                newInput.setAttribute('type','text');
                                $(newInput).addClass('element-'+obj.label);
                                tempDiv.appendChild(newInput);
                            }
                        }
                    );
                    return tempDiv.innerHTML;
                };

                $scope.model = { "viewValue": "", "modelValue": [{"nickname":"Abc","index":0,"id":"2","label":"obj","name":"Abc"},{"innerText":"does something with","index":1},{"nickname":"bcd","index":3,"id":"0","label":"obj","name":"bcd"}] };

                $scope.model.viewValue = $scope.getViewValue();

        }],

        compile: function(elm, attrs){
 
             return {
                 pre: function(scope, elm, attrs, ctrl, transcludeFn){
                     
                    elm.html(scope.model.viewValue);
                    ctrl.$setViewValue(elm.html());

                    console.log(elm);
                    angular.forEach(elm[0].childNodes, function (node, index) {
                        if (node.nodeName === "INPUT") {
                           
                                $compile(node)(scope);
                            
                            

                        }
                    });
                    


                    //click all of them to make them autosize
                    $('div.editable input').click();

                 },
                 post: function(scope, elm, attrs, ctrl) {
                   

                    //prevent enter from being pressed
                    elm.bind('keydown',function(evt){
                        if (evt.keyCode == 13) {
                            evt.preventDefault();
                            return false;
                        }
                    });




                    //click all of them to make them autosize
                    $('div.editable input').click();


                    //Change listeners
                    elm.bind('blur keyup paste input click', function() {

                            var new$viewValue = {
                                viewValue: elm.html(),
                                modelValue: []
                            }
                            var index = 0;
                            angular.forEach(elm[0].childNodes, function(value, index) {
                                if (value.nodeName === "INPUT") {
                                    if (value.value) {

                                        var obj = {
                                            nickname: value.value,
                                            index: index,
                                            id: $(value).attr("data-id"),
                                            label: $(value).attr("data-label"),
                                            name: $(value).attr("data-name")
                                        };


                                        new$viewValue.modelValue.push(obj);

                                        //if type is entity


                                    } else {
                                        value.parentNode.removeChild(value);
                                    }
                                } else if (value.nodeName === "#text") {

                                    var last = null;
                                    if(new$viewValue.modelValue.length > 0){
                                        var last = new$viewValue.modelValue[new$viewValue.modelValue.length-1];
                                    }


                                    //if last was innerText (update it)
                                    if (last!=null && last.innerText){
                                        last.innerText += value.textContent.trim()
                                    }


                                    //else push it
                                    else {
                                        new$viewValue.modelValue.push({
                                            innerText: value.textContent.trim(),
                                            index: index
                                        });
                                    }
                                }
                                index++;
                            });
                            ctrl.$setViewValue(new$viewValue);
console.log(JSON.stringify(scope.model.modelValue));
                         
                    });

                }
             }
         },

    };
}]);

div > div > div {
  background-color: grey;
  min-width: 100px;
  min-height: 10px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="test">
    <button ng-click="addInput()">Add Input</button>
    <div contenteditable="true" ng-model="model">

    </div>
    See Console</div>
</div>

Answer 1

这是一种使用自定义指令的方法。我无法完全匹配您的数据模型，但这应该能够满足您的需求。

这是对象模型的样子:

{
  "viewValue": "\n abc\n <input type=\"text\">\n abc\n ",
  "modelValue": [
    {
      "innerText": "abc",
      "index": 0
    },
    {
      "obj": "abc",
      "index": 1
    },
    {
      "innerText": "abc",
      "index": 2
    }
  ]
}

viewValue 是构成 contenteditable 的 html，您在 modelValue 中描述的内容。

这里我们设置了一堆事件监听器(受 this question 启发)并构建模型。

elm.bind('blur keyup paste input', function() {
    scope.$apply(function() {
        var new$viewValue = {
            viewValue: elm.html(),
            modelValue: []
        }
        var index = 0;
        angular.forEach(elm[0].childNodes, function(value, index) {
            if (value.nodeName === "INPUT") {
                if (value.value) {
                    new$viewValue.modelValue.push({
                        obj: value.value,
                        index: index
                    });
                } else {
                    value.parentNode.removeChild(value);
                }
            } else if (value.nodeName === "#text") {
                new$viewValue.modelValue.push({
                    innerText: value.textContent.trim(),
                    index: index
                });
            }
            index++;
        });
        ctrl.$setViewValue(new$viewValue);
    });
});

这是获取 contenteditable div 的所有 childNodes 并检查它们是输入类型还是文本类型并添加模型的适当值。我们还存储了 div 的 html 状态，以允许我们重绘 View 。

调用渲染函数绘制 View ，我们将 View 的 html 设置为我们存储在模型中的 html。

ctrl.$render = function() {
    elm.html(ctrl.$viewValue.viewValue);
    //Untested code that should add the text back into the fields if the model already exists
    angular.forEach(elm[0].childNodes, function (value, index) {
        if (value.nodeName === "INPUT") {
            if (ctrl.$viewValue.modelValue[index].obj) {
                 value.value = ctrl.$viewValue.modelValue[index].obj
            }
            else {
                 value.parentNode.removeChild(value);
            }
        }
    });
};

编辑:这里有两种数据绑定(bind)方式:

scope.getViewValue = function() {
    var tempDiv = document.createElement("div");
    angular.forEach(ctrl.$viewValue.modelValue, function(value, index) {
      if (value.innerText) {
        var newTextNode = document.createTextNode(value.innerText);
        tempDiv.appendChild(newTextNode);
      } else if (value.obj) {
        var newInput = document.createElement('input');
        newInput.type = "text";
        newInput.value = value.obj;
        tempDiv.appendChild(newInput);
      }
    });
    return tempDiv.innerHTML;
};


scope.$watch(function() { return ctrl.$modelValue; }, function(newVal, oldVal) {
    var newViewValue = scope.getViewValue();
    ctrl.$setViewValue({
      "viewValue": newViewValue,
      "modelValue": ctrl.$viewValue.modelValue
    });
   ctrl.$render();
}, true);

这样做是在 ng-model 引用的对象上设置一个观察者，每当它发生变化时，它都会重新计算 View 的 innerHTML。它有一个错误，当重新绘制字段时焦点会丢失。存储具有焦点的元素并在重绘时恢复它应该可以解决这个问题。

对于其余的代码，要查看它的实际效果，请查看下面的代码片段。我添加了一个添加额外文本字段的按钮，以表明它支持添加更多输入。

// Code goes here

var myApp = angular.module('myApp', []);
myApp.controller('test', ['$scope',
  function($scope) {
    $scope.addInput = function() {
      //Put in a directive if using for real
      var input = document.createElement('input');
      input.type = "text";
      document.querySelector("div[contenteditable]").appendChild(input);
    }

    $scope.test = {
      "viewValue": "",
      "modelValue": [{
        "innerText": "abc",
        "index": 0
      }, {
        "obj": "abc",
        "index": 1
      }, {
        "innerText": "abc",
        "index": 2
      }]
    };
  }
]);

myApp.directive('contenteditable', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {

      //Change listeners
      elm.bind('blur keyup paste input', function() {
        scope.$apply(function() {
          var new$viewValue = {
            viewValue: elm.html(),
            modelValue: []
          };
          var index = 0;
          angular.forEach(elm[0].childNodes, function(value, index) {
            if (value.nodeName === "INPUT") {
              if (value.value) {
                new$viewValue.modelValue.push({
                  obj: value.value,
                  index: index
                });
              } else {
                value.parentNode.removeChild(value);
              }
            } else if (value.nodeName === "#text") {
              new$viewValue.modelValue.push({
                innerText: value.textContent.trim(),
                index: index
              });
            }
            index++;
          });
          ctrl.$setViewValue(new$viewValue);
        });
      });

      // Draw the field
      ctrl.$render = function() {
        elm.html(ctrl.$viewValue.viewValue);
        //Untested code that should add the text back into the fields if the model already exists
        angular.forEach(elm[0].childNodes, function(value, index) {
          if (value.nodeName === "INPUT") {
            if (ctrl.$viewValue.modelValue[index].obj) {
              value.value = ctrl.$viewValue.modelValue[index].obj;
            } else {
              value.parentNode.removeChild(value);
            }
          }
        });
      };

      // Load initial value.

      scope.getViewValue = function() {
        var tempDiv = document.createElement("div");
        angular.forEach(ctrl.$viewValue.modelValue, function(value, index) {
          if (value.innerText) {
            var newTextNode = document.createTextNode(value.innerText);
            tempDiv.appendChild(newTextNode);
          } else if (value.obj) {
            var newInput = document.createElement('input');
            newInput.type = "text";
            newInput.value = value.obj;
            tempDiv.appendChild(newInput);
          }
        });
        return tempDiv.innerHTML;
      };


      scope.$watch(function() { return ctrl.$modelValue; }, function(newVal, oldVal) {
        var newViewValue = scope.getViewValue();
        ctrl.$setViewValue({
          "viewValue": newViewValue,
          "modelValue": ctrl.$viewValue.modelValue
        });
       ctrl.$render();
      }, true);
    }
  };
});

div > div > div {
  background-color: grey;
  min-width: 100px;
  min-height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="test">
    <button ng-click="addInput()">Add Input</button>
    <div contenteditable="true" ng-model="test">

    </div>
    {{test}}</div>
</div>