我有一个模板指令几乎可以按照我想要的方式工作，简单的版本可以工作：-
<div bw-template-replace>
<template>This is template text, replace [[#this]] please</template>
<this>text replaced</this>
</div>
扩展到
<div bw-template-replace><span>This is template text, replace text replaced please</span></div>
但是，如果我嵌入其他指令，它们不会按预期完全工作。
请参阅我的 plunk http://plnkr.co/edit/dLUU2CMtuN5WMZlEScQi?p=preview
在指令的链接函数结束时，我 $compile 生成的文本/节点适用于 {{scope interpolated text}} 但不适用于使用相同范围的嵌入式指令。
我需要这个的原因是因为我将 ng-translate 用于现有的 ng-app，并且我想使用现有的英文文本作为翻译查找的键。一个不常见的翻译案例是我们有如下 HTML（从应用程序中提取），据我了解，[[#ageInput]] 和 [[#agePeriod]] '参数'可能出现在其他语言的不同位置-translate 目前对此场景没有真正的支持。
<div class="row-fluid">
<div class="span12" translate bw-template-replace>
<template>
If current version of media has not been read for [[#ageInput]] [[#agePeriod]]
</template>
<ageInput><input type=number ng-model="policy.age" style="width:50px"/></ageInput>
<agePeriod><select style="width:100px" ng-model="policy.period" ng-options="p for p in periods" /></agePeriod>
</div>
</div>
非常感谢任何帮助。
当您是新手时，我喜欢必须经历这些场景，因为它确实迫使您了解正在发生的事情。我现在让它工作了，基本上我之前的指令我找到了几种替换 html 的方法，希望 Angular 能神奇地把所有东西都整理出来。现在我对嵌入有了更好的理解，特别是我让它按需要工作的嵌入函数。传递给 $transcludeFn 的克隆元素已经附加了作用域并且已经被 $compiled，所以我的函数现在解析模板文本并生成单独的 textElement 并移动参数元素以适应模板。
我目前的解决方案
.directive('TemplateReplace', ['$compile', '$document', '$timeout',
function ($compile, $document, $timeout) {
return {
restrict: 'AC',
transclude: true,
link: function (scope, iElement, iAttrs, controller, transclude) {
transclude(scope, function (clone, $scope) {
$timeout(function () {
// Our template is the first real child element (nodeType 1)
var template = null;
for (var i = 0, ii = clone.length; i < ii; i++) {
if (clone[i].nodeType == 1) {
template = angular.element(clone[i]);
break;
}
}
// Remember the template's text, then transclude it and empty its contents
var html = angular.copy(template.text());
iElement.append(template); // Transcluding keeps external directives intact
template.empty(); // We can populate its inards from scratch
// Split the html into pieces seperated by [[#tagname]] parts
if (html) {
var htmlLen = html.length;
var textStart = 0;
while (textStart < htmlLen) {
var tagName = null,
tagEnd = htmlLen,
textEnd = htmlLen;
var tagStart = html.indexOf("[[#", textStart);
if (tagStart >= 0) {
tagEnd = html.indexOf("]]", tagStart);
if (tagEnd >= 0) {
tagName = html.substr(tagStart + 3, tagEnd - tagStart - 3);
tagEnd += 2;
textEnd = tagStart;
}
}
// Text parts have to be created, $compiled and appended
var text = html.substr(textStart, textEnd - textStart);
if (text.length) {
var textNode = $document[0].createTextNode(text);
template.append($compile(textNode)($scope));
}
// Tag parts are located in the clone then transclude appended to keep external directives intact (note each tagNode can only be referenced once)
if (tagName && tagName.length) {
var tagNode = clone.filter(tagName);
if (tagNode.length) {
template.append(tagNode);
}
}
textStart = tagEnd;
}
}
}, 0);
});
}
};
}
]);