AngularJS create directive dynamically inside loop

Question

Problem Statement

I have below two parent and child data structures like this where on parent div header click dynamic directive for showing corresponding child records are created.

But when I click on parent header link corresponding children items are not showing in table structure.Can anyone see where it is wrong?

<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>

and corresponding HTML is

<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>

and here is a plnkr example

I am learning angularjs day by day so please bear with me if I am wrong somewhere in implementing above.

Your help is appreciated.Thanks.

Answer 1

Here is another test case of your problem take a look at this one hope you get some thing useful. 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>

Answer 2

I hope this example helps you

If you want to create dynamic directives you have to use all attribute of them like scope, template, ngTransclude, replace and ...

This example show you how to bind data from controller to one directive using 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>