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.
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.