Angular 1指令未在ng-repeat内的指令内呈现

Question

I'm having issues with Angular directives.

My goal is to render a directive mmContentRow for each element in a scope using ng-repeat . That directive mmContentRow has a template where another directive relativeDate is rendered.

The problem is that relativeDate does not get rendered inside mmContentRow . I've tried many solutions but nothing so far. Here is the code:

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: '=',
    }
  };
}]);

Example data:

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

Rendered output:

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

Expected output:

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

As far as I can see, the relative-date inside a directive inside ng-repeat doesn't get compiled. I expected Angular to automatically compile it, but it doesn't seem to happen. Should I explicitly tell Angular to compile relative-date inside mmContentRow ?

Update: I've created a fiddle with simplified version of my problem: http://jsfiddle.net/cbrwizard/4e2r2o07/ . Everything works there. Weird! I will post here an update if I figure the difference between the fiddle and my code.

Answer 1

Thanks to @appeiron's suggestion, I've created a fiddle http://jsfiddle.net/cbrwizard/4e2r2o07/ which let me understand that the issue is in Angular, but in the project's code.

Turned out a template wasn't rendered directly, but instead some regex magic was used to parse the html file. Adding

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

where element is an html file string was enough to make it work.