AngularJS：通过插值观察嵌入内容的变化？

Question

我整理了一个plunker，最能说明我的问题。

我正在尝试编写一个简单的指令，该指令将从指令中更新嵌入的 html。

例如我想要：

<make-bold>Foo *bar* {{something}}</make-bold> 

生成成

<span>Foo <b>bar</b> somevalue<span>  

plunker 上的示例运行良好，但我不知道如何获取嵌入内容更改的通知（观看）。在示例中，尝试选择不同的项目（通过单击它们），您会注意到“已处理”没有更新。

我很确定问题是传递给链接函数的元素没有更新，而是内容更新，因此无法观看。

指令

app.directive('makeBold', function($interpolate, $timeout, $compile)
{

  var regex = new RegExp("\\*(.+?)\\*", 'g');
  var replace = "<b>$1</b>";

  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    template: '<span ng-transclude></span>',
    link: function (scope, element, attrs)
    {
      scope.$watch(
        function() { 
          // *** What do I need to watch here? ***
          return element;
        }, 
        function(n, o) {
          var text = $interpolate(element.text())(scope); 
          var newContent = text.replace(regex, replace);
          $timeout(function() { element.html(newContent); });
      });

    }
  };
});

模板

<div ng-show="selected">
    <h1>{{selected.name}}</h1>
    <p><i>Original:</i> {{selected.detail}}</p>
    <p><i>Processed:</i> <make-bold>{{selected.detail}}</make-bold></p>
</div>

（注意：我实际上并不想制作“make-bold”指令，但这说明了我遇到的问题。）

Answer 1

这是一个有效的plunker

这个不是很明显而且很有挑战性。 我必须查看 angular.js 源代码才能完全了解嵌入内容的位置以及 angular 对插值文本的作用。

这里的技巧是禁用角度插值并手动使用 $interpolate。

compile.js 内的 addTextInterpolateDirective 函数 负责插值的魔法绑定（ {{ }} ）。

稍后，我将通过详细说明更新此答案。

解决办法：

app.directive('makeBold', function( $interpolate ) {

  var regex = new RegExp("\\*(.+?)\\*", 'g');
  var replace = "<b>$1</b>";

  return {
    restrict: 'E',
    scope: true,
    compile: function (tElem, tAttrs) {
      var interpolateFn = $interpolate(tElem.html(), true);
      tElem.empty(); // disable automatic intepolation bindings
      return function(scope, elem, attrs){
        scope.$watch(interpolateFn, function (value) {
          var newContent = value.replace(regex, replace);
          elem.html(newContent);
        });
      }
    }
  };
});