Angular 1 指令不会在 ng-repeat 内的指令内呈现答案

【问题标题】：Angular 1 directive does not render inside a directive inside ng-repeatAngular 1 指令不会在 ng-repeat 内的指令内呈现
【发布时间】：2018-04-11 12:54:21
【问题描述】：

我在使用 Angular 指令时遇到问题。

我的目标是使用ng-repeat 为范围内的每个元素呈现指令mmContentRow。该指令mmContentRow 有一个模板，其中呈现了另一个指令relativeDate。

问题是relativeDate 没有在mmContentRow 中呈现。我已经尝试了很多解决方案，但到目前为止还没有。代码如下：

parent.html:

  <ul>
    <mm-content-row ng-repeat="report in selected.reports" date="report.reported_date"/>
  </ul>

mm-content-row.js

angular.module('inboxDirectives').directive('mmContentRow', function() {
  return {
    restrict: 'E',
    templateUrl: 'mm-content-row.html',
    scope: {
      date: '=',
    }
  };
});

mm-content-row.html:

<li>
  <span>{{date}}</span>
  <relative-date date="{{date}}"></relative-date>
</li>

relative-date.js:

angular.module('inboxDirectives').directive('relativeDate', ['FormatDate', function(FormatDate) {
  return {
    restrict: 'E',
    template: '<span>rendered something</span>',
    scope: {
      date: '=',
    }
  };
}]);

示例数据：

{ selected: {reports: 
[{reported_date: 1508493112758}, {reported_date: 1508493101933}]
} }

渲染输出：

<ul>
  <li>
    <span>1508493112758</span>
    <relative-date date="1508493112758"></relative-date>
  </li>
  <li>
    <span>1508493101933</span>
    <relative-date date="1508493101933"></relative-date>
  </li>
</ul>

预期输出：

<ul>
  <li>
    <span>1508493112758</span>
    <span>rendered something</span>
  </li>
  <li>
    <span>1508493101933</span>
    <span>rendered something</span>
  </li>
</ul>

据我所知，ng-repeat 内的指令内的 relative-date 没有被编译。我希望 Angular 能够自动编译它，但它似乎没有发生。我应该明确告诉 Angular 在 mmContentRow 内编译 relative-date 吗？

更新：我用我的问题的简化版本创建了一个小提琴：http://jsfiddle.net/cbrwizard/4e2r2o07/。一切都在那里工作。诡异的！如果我弄清楚小提琴和我的代码之间的区别，我会在这里发布更新。

【问题讨论】：

你能在 jsfiddle 创建一个简单的例子来加快解决问题吗？
仍然摸不着头脑，为什么你需要 2 个自定义指令，而这些指令本来可以一次性完成
@Mudassar 我也想在其他指令中重用relativeDate。在此示例中，我删除了实现细节，以便我了解您的问题来自哪里

标签： javascript angularjs angularjs-directive angularjs-ng-repeat custom-directive

【解决方案1】：

感谢@appeiron 的建议，我创建了一个小提琴http://jsfiddle.net/cbrwizard/4e2r2o07/，它让我明白问题出在Angular 中，但在项目代码中。

原来没有直接渲染模板，而是使用了一些正则表达式魔法来解析html 文件。添加

$compile($(element).contents())(scope)

element 是一个 html 文件字符串，足以让它工作。

【讨论】：