Question

我有一个“spinner”指令，它只是表格中的<tr>行，显示在API调用完成之前显示的GIF“微调器”。突然间，我的指示停止了正常工作，我不明白为什么！

这是表格的HTML模板

<table id="active-backups-table" class="backup-table">
                <thead>
                    <tr>
                        <th>Customer</th>
                        <th>Last Archived</th>
                        <th>Archive Size (GB)</th>
                        <th>Mailboxes</th>
                        <th>Items</th>
                        <th></th>
                    </tr>
                </thead>

                <tbody ng-if="isLoading">
                    <sk-spinner></sk-spinner>
                </tbody>

            </table>

这是我的指示

app.directive('skSpinner', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'EA',
        replace: true,
        template: '<tr class="spinner-wrap"><td colspan="6"><p class="spinner"></p></td></tr>'
    };
}]);

最后这是在HTML

中呈现的内容

<tr class="spinner-wrap"><td colspan="6"><p class="spinner"></p></td></tr>
<table id="active-backups-table" class="backup-table">
                    <thead>
                        <tr>
                            <th>Customer</th>
                            <th>Last Archived</th>
                            <th>Archive Size (GB)</th>
                            <th>Mailboxes</th>
                            <th>Items</th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody ng-if="isLoading">

                    </tbody>

                </table>

正如您所看到的，<tr>被添加到<table>之外，即使它应该替换<tbody>中的指令标记...我不知道为什么会这样突然发生。

有什么想法吗？感谢

Answer 1

我将其修改为此http://jsbin.com/bozuziwo/1/edit并且有效。正如我所提到的，我不确定为什么它不起作用，但可能是角度问题see this: 1459

AngularJS指令没有在正确的位置放入DOM

1 个答案: