0

I'm working on an angular directive to wrap up ng-table with some filtering/exporting functionality. It is aimed to be reusuable for multiple tables so the <td> elements must be dynamic. I am attempting to handle this by using ng-transclude

The problem is that my <td> elements require some directives such as ng-bind,data-title, and sortable. By the time they are attempted to be transcluded by the directive they have already been rendered to empty values. I need a way to prevent the <td> rows from being rendered until they have been inserted into the directive

Here is my view markup:

<div>
   <my-data-table search-filter="ss" table-values="mvData">
     <td data-title="'UUID' | translate" sortable="'id'" ng-bind="row.uuid | shortUuid"></td>
     <td data-title="'DEVICE.UNAME' | translate" sortable="'uname'" ng-bind="row.uname"></td>
     <td data-title="'DEVICE.LOGIN' | translate" sortable="'last_login'">{{{true: (row.last_login | selectedTimezone | moment:'MMM D, YYYY h:mma'), false: 'N/A'}[!!row.last_login]}}</td>
   </my-data-table>
</div>

The directive template:

<div class="row">
  <div class="col-sm-12">
    <table ng-table="mvData.tableParams" class="table table-striped table-hover table-bordered" template-pagination="src/tables/responsive-pager.html">
      <tr ng-repeat="row in $data">
        <div ng-transclude></div>
      </tr>
    </table>
  </div>
</div>

The directive declaration:

angular.module('myApp')
.directive('myDataTable',function() {

    return {
        restrict:'E'
      , templateUrl:'src/tables/myDataTable.tpl.html'
      , transclude:true
      , scope: {
            searchFilter:'='
          , tableValues:'='
        }
      , link:function(scope,el,attr,ctrls) {
          console.log('hello world');
        }
      }
});
||||||
1

Part of the problem is that when you split the table and columns into a directive and transcluded content, Angular will get confused because it tries DOM manipulation on invalid HTML (<td> elements can't exist outside of a <table> and <tr> elements).

To get around this, there are a couple of things that you need to do:

  1. Rather than <td> in the transcluded content, you'll need to change these to <div> (These will be replaced into <td> later)

  2. Your template declaration will be more involved so that you construct the template entirely as a string. In here, you do the logic to create the HTML you want. After you pass this string template to Angular, all of the rest of the machinery should work. Essentially, you're manually transcluding the content.

Here's a sample that includes the ng-table declarations, but doesn't include the ng-table directives for simplicity:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
   <my-data-table search-filter="ss" table-values="mvData">
     <div data-title="'UUID' | translate" sortable="'id'" ng-bind="row.uuid"></div>
     <div data-title="'DEVICE.UNAME' | translate" sortable="'uname'" ng-bind="row.uname"></div>
     <div data-title="'DEVICE.LOGIN' | translate" sortable="'last_login'"></div>
   </my-data-table>
</div>
</body>
<script>
    var app = angular.module('myApp',[]);

    app.controller("MainCtrl", function($scope){
        $scope.mvData= {
            $data : [
                {uuid : 'abc', uname : 'test'},
                {uuid : 'abc1', uname : 'test1'},
                {uuid : 'abc2', uname : 'test2'},
                {uuid : 'abc3', uname : 'test3'}
            ]
        };
    })

    app.directive('myDataTable',function() {
        return {
            restrict:'E',
            template : function(elem, attr){
                var startStr = 
                    '<div class="row">' + 
                        '<div class="col-sm-12">' + 
                            '<table ng-table="mvData.tableParams" class="table table-striped table-hover table-bordered" template-pagination="src/tables/responsive-pager.html">' + 
                                '<tbody><tr ng-repeat="row in tableValues.$data">';
                var endStr =    '</tr></tbody>' +
                            '</table>' + 
                        '</div>' + 
                    '</div>';

                var template = startStr;
                var colStr;
                angular.forEach(elem.find("div"), function(item){
                    colStr = item.outerHTML.replace('<div ','<td ').replace('</div>','</td>');
                    template = template + colStr;
                });

                template = template + endStr;
                return template;
            },
            scope: {
                searchFilter:'='
              , tableValues:'='
            }, 
          }
    });



</script>

</html>
||||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.