Question

当父作用域上的属性发生更改然后获取整个编译的HTML时，我需要重新编译我的指令的已转换内容。

这是指令：

<custom-directive title="bla">
  <!--
   Here I iterate over the parent scope's logs variable;
   Nothing stays as result of the compilation
  -->
  <span ng-repeat="log in logs">{{ log }}</span>

 <!-- Expressions like these are evaluated fine when using $interpolate -->
 {{ 'foo' }}
</custom-directive>

这是指令的实现：

{
  template: '<a class="btn">Do something</a>',
  replace: true,
  restrict: 'E',
  transclude: true,
  scope: {
    title: '@'
  },
  link: function (scope, element, attrs, ctrl, transclude) {
    scope.$watch(function () {
      return scope.$parent.logs;
    }, function () {
      transclude(function (clone) {
        $compile(clone)(scope.$parent);

        // Now I need to use the compiled clone from here,
        // turn it into plain text and URL encode it
      });
    }, true);
  }
};

问题在于我没有评估我在转换HTML中使用的任何指令（即在指令的主体中），例如ngRepeat。如果我在链接函数中使用$interpolate而不是$compile，则至少会打印{{ }}中的表达式，但我需要正确编译整个已转换的HTML。

换句话说，我的目标是每次父作用域的日志更改时重新编译指令中的HTML，然后获取已编译的HTML并用它做任务（我最终需要将其转换为纯文本并对其进行URL编码））。

我很惊讶我必须手动开始这样做，所以我的方法可能完全错误。

Answer 1

我明白了。我可能只是不完全理解我可以传递给我的链接方法的transclude函数;手动编译它只是没有为我做。

相反，我最终在指令的模板中包含了ngTransclude指令。这样，被抄送的内容就是链接功能中element的一部分，并且可以自动正确编译。

然后我可以只观察元素的文本更改，而不是观察父作用域上可以更改插值文本的特定属性。如果我决定稍后在被抄送的内容中有更多的范围变量，那么它会更灵活。

故事的道德：不要混淆transclude功能，只需在模板中使用ngTransclude并在element本身上访问它。

{
  template: '<a class="btn">Do something <div ng-transclude class="hidden"></div></a>',
  replace: true,
  restrict: 'E',
  transclude: true,
  scope: {
    title: '@'
  },
  link: function (scope, element, attrs, ctrl, transclude) {
    scope.$watch(function () {
      return element.find('[ng-transclude]').text();
    }, function (text) {
      // do something with text here
    }, true);
  }
};

已转换的内容无法正确编译

1 个答案: