Question

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

我正在尝试编写一个简单的指令，它将从指令更新transcluded 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源代码，以完全理解转换内容的实际位置以及内插文本的角度。

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

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);
        });
      }
    }
  };
});

AngularJS：通过插值观察被转换的内容变化？

1 个答案:

解决方案：