AngularJS在循环内动态创建指令
AngularJS create directive dynamically inside loop
问题陈述
我在下面有两个类似这样的父数据结构和子数据结构,其中在父div标头上创建了用于显示相应子记录的click dynamic指令。
但当我点击父标题链接时,相应的子项不会显示在表结构中。有人能看到哪里出了问题吗?
<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>
我希望这个例子能帮助你
如果你想创建动态指令,你必须使用它们的所有属性,比如scope、template、ngTranslude、replace和。。。
此示例演示如何使用scope将数据从控制器绑定到一个指令。
angular.module("app", []);
angular.module("app").controller("ctrl", function($scope, $filter) {
$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 = [
{ id: 1, parent_id: 1, name: "Test Child 1" },
{ id: 1, parent_id: 1, name: "Test Child 2" },
{ id: 1, parent_id: 2, name: "Test Child 3" },
{ id: 1, parent_id: 2, name: "Test Child 4" },
{ id: 1, parent_id: 2, name: "Test Child 5" },
{ id: 1, parent_id: 3, name: "Test Child 6" }
];
$scope.getChild = function(parentId) {
var findChildren = $filter("filter")($scope.children, {
parent_id: parentId
});
$scope.setChild = findChildren;
}
});
angular.module("app").directive("directive", function() {
var template = "<div class='"panel-body'">" +
"<table 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 {
scope: {
child: "="
},
template: template,
link: function(scope, elm, attrs, ctrl) {
scope.$watch("child", function(newValue) {
if (newValue)
scope.children = newValue;
}, true);
}
};
});
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h1>parent list</h1>
<ul class="list-group">
<li class="list-group-item" ng-repeat="parent in parents">
{{parent.name}}
<button ng-click="getChild(parent.id)" class="btn btn-sm btn-success pull-right">click to get child</button>
</li>
</ul>
<hr />
<h1>child list</h1>
<directive child="setChild"></directive>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>
相关文章:
- AngularJs从列表中动态创建指令
- 在运行时创建指令的实例
- 使用OnClick函数(AngularJS)创建指令
- 为引导菜单项创建指令
- 角度 - 基于模型创建指令
- 在 angularJs 中创建指令
- AngularJS:在指令内创建指令
- AngularJs:创建指令
- 我可以使用 ng 选项创建指令(不使用选择标签)吗?
- 为th标记创建指令
- AngularJS在循环内动态创建指令
- 动态创建指令angularjs,并从新指令中获取变量输入
- 创建指令,该指令将每个列表元素包装在引导面板中,并带有删除、重新排序…的控件…
- 动态创建指令
- 为两个视图创建指令
- 在AngularJS的1.3和2版中创建指令作用域的方式是一样的
- 当使用$compile以编程方式创建指令时,如何调用link函数?
- 在这个angular.js示例中创建指令的意义是什么?
- 创建指令,在使用它的地方之外插入HTML
- AngularJS用父控制器变量的值创建指令作用域