Angular 的替代方案在旧版本中嵌入后备内容
Alternative to Angular transclude fallback content in older versions
Transclude fallback content
是添加到 Angular V1.5.0
的功能之一
我正在为 Angular 编写一个 dateTimePicker module 并想为下一个版本添加自定义用户输入模板功能,而 Transclude fallback content
正是我想要的,因为如果用户在指令中没有放置任何内容,则默认模板将注入。
但是我不能强迫每个人都使用Angular V1.5.X
有没有其他解决方案?
另一种解法:
由于我有一个巨大的 html 模板,无法将其设为单行字符串或...将其放入 JS 文件中,因此我提出了 Mario Lamacchia
想法。
HTML:
<div>
<ng-transclude></ng-transclude>
<div ng-if="defaultTemplate">...</div>
</div>
JS:
link: function(scope, element, attrs, ngModel) {
if (!element.find('ng-transclude').children().length) {
scope.defaultTemplate = true;
element.find('ng-transclude').remove();
}
}
在 1.3.x 版本中添加此 link 函数给出与 1.5.x 示例相同的结果,用于嵌入回退内容
link: function(scope, element) {
if (!element.find('ng-transclude').children().length) {
element.find('button').append('<b style="color: red">Button1</b>');
}
}
Transclude fallback content
是添加到 Angular V1.5.0
的功能之一
我正在为 Angular 编写一个 dateTimePicker module 并想为下一个版本添加自定义用户输入模板功能,而 Transclude fallback content
正是我想要的,因为如果用户在指令中没有放置任何内容,则默认模板将注入。
但是我不能强迫每个人都使用Angular V1.5.X
有没有其他解决方案?
另一种解法:
由于我有一个巨大的 html 模板,无法将其设为单行字符串或...将其放入 JS 文件中,因此我提出了 Mario Lamacchia
想法。
HTML:
<div>
<ng-transclude></ng-transclude>
<div ng-if="defaultTemplate">...</div>
</div>
JS:
link: function(scope, element, attrs, ngModel) {
if (!element.find('ng-transclude').children().length) {
scope.defaultTemplate = true;
element.find('ng-transclude').remove();
}
}
在 1.3.x 版本中添加此 link 函数给出与 1.5.x 示例相同的结果,用于嵌入回退内容
link: function(scope, element) {
if (!element.find('ng-transclude').children().length) {
element.find('button').append('<b style="color: red">Button1</b>');
}
}