angularjs - ng-repeat 中的 Angular 2-way 绑定

Question

我正在尝试使用 ng-bind（或双花括号）和 html5 的 contenteditable 更新 ng-repeat 中的值。

我无法让双重绑定工作。不要认为 contenteditable 是问题，因为它也不适用于输入字段。

<div ng-controller="MyCtrl">     
    <ul><li ng-repeat="sequence in sequences"  sv-element>
            <span class="flex1" contenteditable="true" ng-bind="sequence.sequenceText"></span> // 
        <span  contenteditable="true">{{sequence.sequenceText}}</span>
    </li></ul>
{{sequences}}
</div>

http://jsfiddle.net/56g2jyd7/1/

Answer 1

好吧，我不想使用指令，但我最终还是这样做了。好，易于：

app.directive('contenteditable', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      // view -> model
      element.bind('blur', function() {
        scope.$apply(function() {
          ctrl.$setViewValue(element.html());
        });
      });

      // model -> view
      ctrl.$render = function() {
        element.html(ctrl.$viewValue);
      };

      // load init value from DOM
     ctrl.$render();
    }
  };
});

http://plnkr.co/edit/Tmx9Kr8PDKaS20vs2MKC?p=preview