[英]Repeating transcluded content in an angular directive
I'm trying to write a simple tree directive in Angular which will nest items, and repeat the transcluded content declared in the first call to the directive, in each of the repeated items.我正在尝试在 Angular 中编写一个简单的树指令,它将嵌套项目,并在每个重复项目中重复第一次调用该指令时声明的嵌入内容。
I have tried this,我试过这个,
angular.module('angularTree',[])
.directive('tree',['$compile',function($compile)
{
return {
scope:{item:"="},
transclude:true,
template:"<div class='tree-item'><ng-transclude></ng-transclude>" +
"<div id='tree-content' class='tree-content'>" +
"<div ng-repeat='child in item.items'>" +
"<tree item='child'><ng-transclude></ng-transclude></tree>" +
"</div>" +
"</div>",
link:function(scope,element,attrs)
{
}
}
}]);
And it works up to a point.它在一定程度上起作用。 It creates a nested tree, with the transcluded content.
它创建一个嵌套的树,包含嵌入的内容。
The problem is that the scope in the repeated child directives, is always pointing at the very first item declared.问题是重复子指令中的范围总是指向声明的第一个项目。 So when I have a variable like this in my controller..
所以当我的控制器中有这样的变量时..
var item = {name:John, items:[{name:Tony},{name:Jill}]};
And pass it into the directive like this并将其传递到这样的指令中
<tree item="item"></tree>
I get a nested list of items, but they all say 'John'.我得到一个嵌套的项目列表,但他们都说“约翰”。
I can see why this happens, because the second is just going to have the same scope as the first..我可以理解为什么会发生这种情况,因为第二个将与第一个具有相同的范围。
My question is...how would I go about repeating the transcluded content in the child elements, but with the scope pointing to the child object not the top node?我的问题是......我将如何重复子元素中的嵌入内容,但范围指向子对象而不是顶部节点?
I've read up on and tried using the $compile, and transclude functions, but I couldn't see any way to get this working.我已经阅读并尝试使用 $compile 和 transclude 函数,但我看不出有什么方法可以让它工作。
Thanks谢谢
It should be work like you have it.它应该像你拥有的那样工作。 I think you´ve just mixed up item and child.
我想你刚刚把 item 和 child 搞混了。 Can´t be sure on that since your code doesn´t show where it outputs the names.
不能确定,因为您的代码没有显示它输出名称的位置。
Inside the ng-repeat loop, child refers to the given of item.items, but item still is the same as the outer item.在 ng-repeat 循环中,child 引用 item.items 的给定,但 item 仍然与外部 item 相同。 I´ve provided a working example, with the outputs in the comments:
我提供了一个工作示例,评论中的输出:
angular.module('myApp', [])
.directive('tree',[function($compile) {
return {
scope:{
item: "="
},
transclude:true,
template: "{{item.name}}" + // John, Tony, Jill
"<div class='tree-item'><ng-transclude></ng-transclude>" +
"<div id='tree-content' class='tree-content'>" +
"<div ng-repeat='child in item.items'>" +
"{{item.name}}" + // John, John
"{{child.name}}" + // Tony, Jill
"<tree item='child'><ng-transclude></ng-transclude></tree>" +
"</div>" +
"</div>",
link: function(scope,element,attrs) {}
}
}]
)
.controller('treeCtrl', ['$scope', function($scope) {
$scope.item = {
name: 'John',
items: [
{name: 'Tony'},
{name: 'Jill'}
]
};
}])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.