AngularJS在将角度替换它之前获取指令HTML并在代码中使用它

Question

I would like to make an universal directive in which the user can easily insert any HTML for the header and footer.

This is my HTML code:

<datagrid 
    id="testing" 
    url="google.com/test">
    <header>
        <p>header</p>
    </header>
    <footer>
        <p>footer</p>
    </footer>
</datagrid>

And I would like to get the inner HTML and parse it on my own.

directive('datagrid', function () {
    return {
        restrict: 'E',
        templateUrl: 'datagrid.htm',
        scope: true,
        transclude: true,
        link: function ($scope, $el, $attr) {

            // get inner HTML, separate header and footer HTML to the variables
            // and add that HTML later in the template

        } 
    };
});

My template:

<script type='text/ng-template' id='datagrid.htm'>
  <table class="datagrid table table-hover table-condensed table-striped">
        <thead>
            <tr class="top-actions-container">
                <!-- INJECT HEADER HTML -->
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- RESULTS -->
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <!-- INJECT FOOTER HTML -->
                <td></td>
            </tr>
        </tfoot>
    </table>
</script>

I'm new to the Angular so I'm open to other suggestions. If that's possible is this a good way to do it?

Answer 1

You can try this:

Usages (in main html)

<datagrid 
    id="testing" 
    url="google.com/test">
    <!--In HEADER I used <table> tag because for some reasons (?) <tr>, <td> tags do not work without <table> tag.-->
    <header>
        <table><tr><td>One</td><td>Two</td><td>Three</td></tr></table>
    </header>
    <footer>
        <p>footer</p>
    </footer>
</datagrid>

Directive JS

app.directive('datagrid', function(){
    return {
        restrict: 'EA',
        scope: true,
        transclude: true,
        templateUrl: '../../datagrid.html',
        link: function(scope, element, attr){
            var header = element.find('header').html();
            element.find('header').remove();
            element.find('thead').html(header);
        }
    };
});

You can write same code for footer.

datagrid.html

<table class="datagrid table table-hover table-condensed table-striped">
    <!-- Keep thead tag empty -->
    <thead></thead>
    <tbody>
        <tr>
            <!-- RESULTS -->
            <td></td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>
<div ng-transclude></div>
<!-- ng-transclude will include all custom html defined under <datagrid> directive -->

I hope this will help you.

Answer 2

I just had to use an arg $transclude in the controller of the directive.

// declaration of DataTable directive
.directive('datagrid', function () {
    return {
        restrict: 'E',
        templateUrl: 'datagrid.htm',
        scope: true,
        transclude: true,
        link: function ($scope, $el, $attr) {
            var dtData = {
                id: $attr.id,
                url: $attr.url
            };

            if ($scope['datagrid'] === undefined) $scope['datagrid'] = [];
            $scope['datagrid'].push([$attr.id, dtData]);
        },
        controller: function ($scope, $transclude) {
            $transclude(function (clone, scope) {
                console.log($(clone).find('header')); // don't work
                $.each(clone, function (i, e) {
                    if ($(e).is('header')) console.log(e); //works
                });
            });

        }
    };
});

From this I believe that I can accomplish my goal. Only questions that are still there are if this is a good way to do this, will that confuse other users of my plugin and why the hell can't I select the "header" element with the jQuery find method? :)

Thank you all for the help. Hope I will soon finish the rest of the goal so I can post it here. There shouldn't be any more problems to accomplish it.