角度满足和突出指示不能很好地发挥作用

Question

我正在尝试在一个可信的div中突出显示匹配的文本（使用ngModel $ formatters和$ parsers）。渲染后不会发生突出显示，并且监听ngModel更改以更新HTML会随着每次更改而移动插入符号。

即，输入'search'后应在$ viewValue中输入后转换为（SEARCH）并在$ modelValue中保持'search'（或本例中为SEARCH），如果删除'h'则删除括号关'搜索'

编辑我编辑了plunkr，以便现在有两个字段绑定到同一个模型（一个输入，一个输入，但这并不重要） - 当你进行更改时一，另一个拿起$ modelValue更改并将其推送到$ formatters，但是进行更改的div并没有获得更改。我希望所有div（无论是否有一个或多个）$ parse和$格式化$ viewValue。

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

HTML

<pre ng-model="someString" highlight-search contenteditable="true"></pre>

JS

app.directive('contenteditable', function() {
  return {
    require: '?ngModel',
    link: function(scope, element, attrs, ctrl) {
      if(!ctrl) return;

      // view -> model
      element.bind('keyup', function() {
        var key = event.keyCode;
        if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return;

        var value = element.html();

        if (ctrl.$modelValue !== value) {
            scope.$apply(function() {
                ctrl.$setViewValue(value);
            });
            //element.html(ctrl.$viewValue);   //messes up cursor position
        }

        console.log(ctrl.$modelValue, '\n', ctrl.$viewValue);
      });

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

app.directive('highlightSearch', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link : function(scope, element, attrs, ngModel) {
            var highlightSites = function (input) {
                return input.replace(/search/gi, '(SEARCH)');
            };

            var unhighlightSites = function (input) {
                return input.replace(/[^A-Z ]/ig, '');
            };

            ngModel.$parsers.push(unhighlightSites);
            ngModel.$formatters.push(highlightSites);
        }
    }
});