Why Doesn't ng-repeat work inside a directive
Question
I'm trying to do something very simple in AngularJS but just can't seem to get it working.
I have a directive and I place some HTML inside the directive that uses ng-repeat on an array inside the directive scope. The problem is that the looping variable is undefined despite it iterating the number of elements in the array.
I know this because I print the element it is currently on in the loop and it prints "undefined", but prints it the number of elements in the array.
Here's the html:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Branches</p>
<ul>
<showbranch>
<tr>
<th>
Name
</th>
</tr>
<tr ng-repeat="subBranch in subBranches"
<td>
{{ f(subBranch.label) }}
</td>
</showbranch>
</ul>
</body>
</html>
and the app.js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
treeBranch = function(){};
$scope.branch = new treeBranch();
$scope.branch.label = "Main Branch";
var subBranch1 = new treeBranch(); subBranch1.label = "branch 1";
var subBranch2 = new treeBranch(); subBranch2.label = "branch 2";
var subBranch3 = new treeBranch(); subBranch3.label = "branch 3";
$scope.branch.subBranches = [ subBranch1, subBranch2, subBranch3 ];
});
app.directive('showbranch',function(){
return {
restrict:'E',
link:function(scope,element,attrs)
{
console.log("Attr: ", attrs);
console.log(scope);
scope.subBranches = scope.branch.subBranches;
scope.f = function(e){
console.log(e)
return e
}
}
}
})
Here's a plunkr of the code: http://next.plnkr.co/edit/5uf6TcT0xqkl7TVe
2 answers
solution1
0 2018-12-18 16:41:27
Your HTML is not valid, that's why you don't see all the elements.
Inside the ul you must show the elements as list elements, and not as tr elements, otherwise it will show up just one single child.
Then your logic is not the best one in angularjs mind.
If you have a directive called showBranch most probably that should be responsible for showing a single branch, given as scope parameter.
And there is no need to return functions to make it dynamic, simply provide it as scope parameter.
So your example could be something like the following:
app.directive('showbranch',function(){
return {
restrict:'E',
scope: {
branch: '='
},
template: '<div>NAME: {{branch.label}}</div>'
}
})
And
<ul>
<li ng-repeat="subBranch in branch.subBranches track by $index">
<showbranch branch="subBranch" ></showbranch>
</li>
</ul>
solution2
0 2018-12-18 21:13:23
The <tr> element does not repeat because the browser is removing bad HTML as the parent element is not a <table> .
The solution is to add a <table> element to make it valid HTML:
<body ng-controller="MainCtrl">
<p>Branches</p>
<ul>
<showbranch>
<!-- ADD table ELEMENT HERE -->
<table>
<tr>
<th>
Name
</th>
</tr>
<tr ng-repeat="subBranch in subBranches">
<td>
{{ f(subBranch.label) }}
</td>
</table>
</showbranch>
</ul>
</body>
The DEMO on PLNKR
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.