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

AngularJS get directive HTML before angular replace it and use it in the code

本文关键字：获取 HTML 指令 替换 angular 代码 AngularJS      更新时间：2023-09-26

我想做一个通用指令，用户可以很容易地为页眉和页脚插入任何HTML。

这是我的HTML代码: 
<datagrid 
    id="testing" 
    url="google.com/test">
    <header>
        <p>header</p>
    </header>
    <footer>
        <p>footer</p>
    </footer>
</datagrid>

我想得到内部的HTML和解析它自己。

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
        } 
    };
});
我的模板:

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

我是Angular的新手，所以我愿意接受其他建议。如果有可能，这是一个好方法吗?

你可以试试:

用法(在主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>

指令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);
        }
    };
});

您可以为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 -->

我只需要在指令的控制器中使用一个arg $transclude。

// 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
                });
            });
        }
    };
});
由此，我相信我能实现我的目标。唯一的问题仍然存在，如果这是一个很好的方式来做到这一点，会混淆我的插件的其他用户，为什么我不能选择"header"元素与jQuery查找方法?:)

谢谢大家的帮助。希望我能尽快完成剩下的目标，这样我就可以把它贴在这里了。完成它应该不会再有任何问题了。

相关文章：