AngularJS: ng-repeat nevykonáva vnútornú smernicu - javascript, angularjs, angularjs-directive, angularjs-scope, angularjs-ng-repeat

Prejdite do problému, kde ng-repeat sa nezdá byť vykonávaním v rámci vlastnej smernice. Myslím, že problém má niečo spoločné s translokovaním / rozsahom, ale nie som si istý.

smernice:

.directive("node", ["$compile", function($compile) {
return {
restrict: "E",
scope: {
obj: "=obj",
},
transclude: true,
link: function(scope, element, attrs, ctrl, transclude) {
transclude(scope, function(clone, scope) {
console.log(clone);
var tmp = angular.element("<div></div>"), template;
tmp.append(clone);
if(scope.obj.hasSub) {
template =
"<div>" +
"<span>{{obj.name}}</span>" +
"<ul>" +
"<li ng-repeat="child in obj.children">" +
"<node data-obj="child" >" + tmp.html() + "</browser-node>" +
"</li>" +
"</ul>" +
"</div>";
} else {
template =
"<div>" +
tmp.html() +
"</div>"
}
element.html("").append($compile(template)(scope));
});
}
};
}]);

regulátor:

.controller("Main", ["$scope", function($scope) {
$scope.items = [
{"name": "one", hasSub: true, children: [
{ "name": "one-one", items: { foo: 3, bar: 2 } }
] },
{"name": "two", hasSub: true, children: [
{ "name": "two-one", items: { foo: 6, bar: 5 } }
] }
];
}]);

html:

   <ul>
<li ng-repeat="item in items">
<node obj="item">
{{obj.name}}
<ul>
<li ng-repeat="(k,v) in obj.items">{{k}}: {{v}}</li>
</ul>
</node>
</ul>

Názov uzla položky je jemný a {{obj.items}} bude vygenerovať správny obsah, ale zdá sa, že ng-repeat nečiní nič.

Plunker

odpovede:

Neexistuje žiadna vlastnosť items v prvej úrovni vašich údajov. Ak zložíte zosilňovač pre items v šablóne a prejdite na child.items to funguje dobre

template =
"<div>" +
"<span>{{obj.name}}</span>" +
"<ul>" +
"<li ng-repeat="child in obj.children">" +
"<node data-obj="child" >" + tmp.html() + "</node>" +
"<ul>"+
"<li ng-repeat="(k,v) in child.items">{{k}}: {{v}}</li>"+
"</ul>"+
"</li>" +
"</ul>" +
"</div>";

DEMO