问题陈述
我有下面两个父子数据结构，如下所示，在父 div 标题上单击动态指令以显示创建的相应子记录。
但是当我单击父标题链接时，相应的子项目不会显示在表结构中。任何人都可以看到哪里出了问题吗？
<script>
var app = angular.module('TestApp', []);
app.controller('TestCtrl', function ($scope) {
$scope.parents = [
{ parent_id: '1', name: 'Parent 1', count: '2' },
{ parent_id: '2', name: 'Parent 2', count: '3' },
{ parent_id: '3', name: 'Parent 3', count: '1' }
];
$scope.getchild= function (parent) {
var children_list = [
{ id: '1', parent_id: '1', name: 'Test Child 1' },
{ id: '2', parent_id: '1', name: 'Test Child 2' },
{ id: '3', parent_id: '2', name: 'Test Child 3' },
{ id: '4', parent_id: '2', name: 'Test Child 4' },
{ id: '5', parent_id: '2', name: 'Test Child 5' },
{ id: '6', parent_id: '3', name: 'Test Child 6' }
];
var directive_name = 'clschild_' + parent.parent_id;
app.directive(directive_name, function() {
var child_html = '<div class="panel-body"> \
<table ng-attr-id="tblchild_'+ parent.parent_id + '" class="table table-hover"> \
<thead> \
<tr> \
<td>Name</td> \
</tr> \
</thead> \
<tbody> \
<tr ng-repeat="child in children"> \
<td>{{child.name}}</td> \
</tr> \
</tbody> \
</table> \
</div>';
return {
template: child_html,
link: function (scope) {
scope.$apply(function () { scope.children = children_list; });
}
}
});
};
});
</script>
对应的HTML是
<div ng-app="TestApp" ng-controller="TestCtrl">
<div class="panel panel-default" ng-repeat="parent in parents">
<div class="panel-heading clearfix">
<a data-toggle="collapse" ng-href="#divchild_{{parent.id}}" ng-click="getchild(parent);" class="pull-left" style="padding-top: 7.5px;">{{parent.name}}</a>
</div>
<div ng-attr-id="divchild_{{parent.id}}" class="panel-collapse collapse">
<div class="clschild_{{parent.id}}">
<div class="panel-body">
aaa
</div>
</div>
</div>
</div>
</div>
这是一个 plnkr 示例
我正在日复一日地学习 AngularJS，所以如果我在上面的实现过程中出现了错误，请多多包涵。
感谢您的帮助。谢谢。
最佳答案
这是您问题的另一个测试用例，看看这个，希望您能得到一些有用的东西。 http://plnkr.co/edit/MMZXa7BViOQBEuH87Kyd?p=preview
var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope', function ($scope) {
$scope.clicked_parent = 0;
$scope.parents = [
{ id: '1', name: 'Test Parent 1', count: '2' },
{ id: '2', name: 'Test Parent 2', count: '3' },
{ id: '3', name: 'Test Parent 3', count: '1' }
];
$scope.children_list = [
{ id: '1', parent_id: '1', name: 'Test Child 1' },
{ id: '2', parent_id: '1', name: 'Test Child 2' },
{ id: '3', parent_id: '2', name: 'Test Child 3' },
{ id: '4', parent_id: '2', name: 'Test Child 4' },
{ id: '5', parent_id: '2', name: 'Test Child 5' },
{ id: '6', parent_id: '3', name: 'Test Child 6' }
];
$scope.isParentTagClicked = false;
$scope.set_parent_id = function(_id){
$scope.isParentTagClicked = !$scope.isParentTagClicked;
if ($scope.isParentTagClicked){
$scope.clicked_parent = _id;
}else{
$scope.clicked_parent = 0;
}
};
}]);
<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-controller="TestCtrl">
<div class="panel panel-default" ng-repeat="parent in parents">
<div class="panel-heading" ng-click="set_parent_id(parent.id)">{{parent.id}}</div>
<div class="panel-body" ng-repeat="child in children_list" ng-show="child.parent_id == clicked_parent" ng-if="child.parent_id == parent.id">
Panel content - {{child.parent_id}}
</div>
</div>
</div>
</body>
</html>
关于javascript - AngularJS 在循环内动态创建指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34714169/