AngularJS 多动态指令绑定答案

【问题标题】：AngularJS multiple dynamic directives bindingAngularJS 多动态指令绑定
【发布时间】：2016-01-14 18:40:12
【问题描述】：

我是 AngularJS 的新手，我太笨了，无法让它工作。

我正在尝试生成

面板列表（动态）
当我点击面板标题时，面板主体会展开/折叠
当特定面板主体折叠时，我想创建一个表格并将一些数据绑定到其中

这是我的代码

    <script>
    var app = angular.module('TestApp', []);
    app.controller('TestCtrl', function ($scope) {
        $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.parent_click = 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.id;
            app.directive(directive_name, function () {
                var child_html = '<div class="panel-body"> \
                    <table ng-attr-id="tblchild_'+ 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>
<div ng-app="TestApp" ng-controller="TestCtrl">
    <div class="panel panel-default" ng-repeat="parent in parents">
        <div class="panel-heading clearfix">
            <a id="testtest" data-toggle="collapse" ng-href="#divchild_{{parent.id}}" ng-click="parent_click(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>

我想将数据绑定到对应的父面板体。我怎样才能做到这一点？

编辑：问题 - 现在当我单击面板标题时，面板主体展开但只显示“aaa”。我无法将子列表绑定到面板主体。

谢谢

【问题讨论】：

您好，我已经编辑了我的问题。不，我的切换不起作用，数据和模板没有绑定到面板主体。
你不能像那样在控制器内部创建指令。
您好，请问还有其他方法可以实现吗？谢谢:)

标签： javascript jquery angularjs

【解决方案1】：

因此可以在这里跟踪单击的父 ID 并通过传递单击的父 ID 来过滤 ng-repeat 中的子列表。

    $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;
      }
    };

并像这样声明视图

<div class="panel panel-default" ng-repeat="parent in parents">
        <div class="panel-heading" ng-click="set_parent_id(parent.id)">{{parent.name}}</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">
          {{child.name}}
 </div>
</div>

【讨论】：