0

我遇到了 Angular 指令的问题。

我的目标是mmContentRow使用ng-repeat. 该指令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>

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

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

4

1 回答 1

0

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

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

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

html文件字符串在哪里element足以使其工作。

于 2017-10-31T10:48:03.630 回答