Angular 1 个指令未在 ng-repeat 中的指令中呈现
Angular 1 directive does not render inside a directive inside ng-repeat
我在使用 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
吗?
更新:我创建了一个 fiddle 简化版本的问题:http://jsfiddle.net/cbrwizard/4e2r2o07/。那里一切正常。诡异的!如果我发现 fiddle 和我的代码之间的区别,我将 post 在这里更新。
感谢@appeiron 的建议,我创建了一个 fiddle http://jsfiddle.net/cbrwizard/4e2r2o07/,这让我明白问题出在 Angular,但在项目代码中。
原来模板没有直接呈现,而是使用了一些正则表达式魔术来解析 html
文件。添加
$compile($(element).contents())(scope)
其中 element
是一个 html 文件字符串足以使其工作。
我在使用 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
吗?
更新:我创建了一个 fiddle 简化版本的问题:http://jsfiddle.net/cbrwizard/4e2r2o07/。那里一切正常。诡异的!如果我发现 fiddle 和我的代码之间的区别,我将 post 在这里更新。
感谢@appeiron 的建议,我创建了一个 fiddle http://jsfiddle.net/cbrwizard/4e2r2o07/,这让我明白问题出在 Angular,但在项目代码中。
原来模板没有直接呈现,而是使用了一些正则表达式魔术来解析 html
文件。添加
$compile($(element).contents())(scope)
其中 element
是一个 html 文件字符串足以使其工作。