Question

使用标记：

<body ng-app="app" ng-controller="ctrl">
  <h1>Type below in the editable div</h1>
  <h3>Use ng-bind:</3>
  <div class="editable" contenteditable=true obj="obj1" ng-bind="obj1.content"></div>
  <h3>Content:</h3>
  <div>{{obj1.content}}</div>

  <h3>Use interpolation</h3>
  <div class="editable" contenteditable=true obj="obj2">{{obj2.content}}</div>
  <h3>Content:</h3>
  <div>{{obj2.content}}</div>
</body>

还有点js：

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.obj1 = {
    content: ''
  };
  $scope.obj2 = {
    content: ''
  };
});

app.directive('contenteditable', function() {
  return {
    scope: {
      obj: '='
    },
    restrict: 'A',
    link: function(scope, elem) {
        elem.on('keyup', function() {
          var text = elem.text();
            scope.obj.content = text;
            scope.$apply();
        });
     }
  };
});

我试图编写一个带有双向数据绑定的contenteditable指令。但奇怪的事情发生了：

使用ngBind：键入类似“a”的内容，插入符号会跳回到第一个位置而不是“a”之后;

使用插值：输入类似'a'的内容，它将变成'aa'。

现场演示：http://jsbin.com/bifabuyu/5/edit

这里发生了什么，我该如何解决？

Answer 1

我通过插值解决您的问题 - 只需从

删除{{obj2.content}}

<div class="editable" contenteditable=true obj="obj2">{{obj2.content}}</div>

它会正常工作。＆＃34;倍增＆＃34;符号发生是因为你的指令绑定到＆＃34; obj2＆＃34;，而内部指令你打印对象＆＃34; obj2＆＃34;。

在令人满意的元素中奇怪的角度数据绑定

1 个答案: