javascript Angularjs：嵌入指令模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19120386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs: transclude directive template
提问by bsr
How to use transclusion in the below case. The intention is to use markup in the html (partials) file, than defining it in template (within the directive).
在以下情况下如何使用嵌入。目的是在 html（部分）文件中使用标记，而不是在模板中（在指令内）定义它。
I found a great tree directive here. (source) Original: http://jsfiddle.net/n8dPm/
我在这里找到了一个很棒的树指令。（来源）原文：http: //jsfiddle.net/n8dPm/
Instead of defining the template in the directive, I was trying to use a transcluded content. I also updated Angular to 1.2.0.rc2. Updated: http://jsfiddle.net/aZx7B/2/
我没有在指令中定义模板，而是尝试使用嵌入的内容。我还将 Angular 更新为 1.2.0.rc2。更新：http: //jsfiddle.net/aZx7B/2/
got below error
得到以下错误
TypeError: Property '$transclude' of object [object Object] is not a function
类型错误：对象 [object Object] 的属性“$transclude”不是函数
code:
代码：
module.directive("tree", function($compile) {
return {
restrict: "E",
transclude: true,
scope: {family: '='},
template:
'<ul>' +
'<li ng-transclude></li>' +
'<li ng-repeat="child in family.children">' +
'<tree family="child"></tree>' +
'</li>' +
'</ul>',
compile: function(tElement, tAttr) {
var contents = tElement.contents().remove();
var compiledContents;
return function(scope, iElement, iAttr) {
if(!compiledContents) {
compiledContents = $compile(contents);
}
compiledContents(scope, function(clone, scope) {
iElement.append(clone);
});
};
}
};
});
<div ng-app="myapp">
<div ng-controller="TreeCtrl">
<tree family="family">
<p>{{ family.name }}</p>
</tree>
</div>
</div>
Edit:
编辑：
With David's suggestion, made some changes. http://jsfiddle.net/aZx7B/3/now, it prints, Parent. changing, family-> treeFamilydidn't work though
在大卫的建议下，做了一些改动。http://jsfiddle.net/aZx7B/3/现在，它会打印出来，父母。改变，family->treeFamily虽然没有用
采纳答案by Erstad.Stephen
You need to output the name of the family in the template as well: http://jsfiddle.net/roadprophet/DsvX6/
您还需要在模板中输出家庭的名称：http: //jsfiddle.net/roadprophet/DsvX6/
module.directive("tree", function($compile) {
return {
restrict: "E",
transclude: true,
scope: {family: '='},
template:
'<ul>' +
'<li ng-transclude></li>' +
'<li ng-repeat="child in family.children">' +
'<tree family="child">{{family.name}}</tree>' +
'</li>' +
'</ul>',
compile: function(tElement, tAttr, transclude) {
var contents = tElement.contents().remove();
var compiledContents;
return function(scope, iElement, iAttr) {
if(!compiledContents) {
compiledContents = $compile(contents, transclude);
}
compiledContents(scope, function(clone, scope) {
iElement.append(clone);
});
};
}
};
});
EDIT
编辑
You could also simplify by doing this: http://jsfiddle.net/roadprophet/DsvX6/2/
你也可以通过这样做来简化：http: //jsfiddle.net/roadprophet/DsvX6/2/
<div ng-app="myapp">
<div ng-controller="TreeCtrl">
<tree family="treeFamily">
</tree>
</div>
</div>
module.directive("tree", function($compile) {
return {
restrict: "E",
transclude: true,
scope: {family: '='},
template:
'<ul>' +
'<li ng-transclude></li>' +
'<p>{{ family.name }}</p>' +
'<li ng-repeat="child in family.children">' +
'<tree family="child"></tree>' +
'</li>' +
'</ul>',
compile: function(tElement, tAttr, transclude) {
var contents = tElement.contents().remove();
var compiledContents;
return function(scope, iElement, iAttr) {
if(!compiledContents) {
compiledContents = $compile(contents, transclude);
}
compiledContents(scope, function(clone, scope) {
iElement.append(clone);
});
};
}
};
});
EDITSame source of the problem though. No template being passed to the inner tree directive. http://jsfiddle.net/roadprophet/DsvX6/3/
编辑虽然问题的来源相同。没有模板被传递给内部树指令。 http://jsfiddle.net/roadprophet/DsvX6/3/
<div ng-app="myapp">
<div ng-controller="TreeCtrl">
<tree family="treeFamily">
<p>{{ family.name }}</p>
</tree>
</div>
</div>
template:
'<ul>' +
'<li ng-transclude></li>' +
'<li ng-repeat="child in family.children">' +
'<tree family="child"><div ng-transclude></div></tree>' +
'</li>' +
'</ul>'
回答by Michelle Tilley
You want to compile the transcluded DOM against the parentscope; you can do this automatically with the injectable $transcludefunction in a directive's controller definition:
您想针对父作用域编译嵌入的 DOM ；您可以$transclude使用指令的控制器定义中的可注入函数自动执行此操作：
module.directive("tree", function($compile) {
return {
restrict: "E",
transclude: true,
scope: { family: '=' },
template: '<ul>' +
'<li ng-repeat="child in family.children">' +
'<tree family="child">' +
'<p>{{ child.name }}</p>' +
'</tree>' +
'</li>' +
'</ul>',
controller: function($element, $transclude) {
$transclude(function(e) {
$element.append(e);
});
},
compile: function(tElement, tAttr, transclude) {
var contents = tElement.contents().remove();
var compiledContents;
return function(scope, iElement, iAttr) {
if(!compiledContents) {
compiledContents = $compile(contents);
}
compiledContents(scope, function(clone) {
iElement.append(clone);
});
};
}
};
});
This allows you to use the parentscope property treeFamilyin your root template (also notice the use of childin the directive's template, above):
这允许您在根模板中使用父作用域属性treeFamily（还请注意child上面指令模板中的使用）：
<div ng-app="myapp">
<div ng-controller="TreeCtrl">
<tree family="treeFamily">
<p>{{ treeFamily.name }}</p>
</tree>
</div>
</div>
You can see an example here: http://jsfiddle.net/BinaryMuse/UzHeW/
你可以在这里看到一个例子：http: //jsfiddle.net/BinaryMuse/UzHeW/
