angularjs - Angular 在表之外渲染指令

Question

我们正在使用 Angular 1.3.15 我有一个元素指令，例如

(function () {
    var controller = function ($scope, $timeout) {
        this.$timeout = $timeout;
        $scope.$watch("vm.spinning", this.throttle.bind(this));
    };

    controller.prototype = {
        throttle: function (spinning, oldValue) {
            if (spinning === oldValue) return;

            this.$timeout.cancel(this.timeout);
            if (spinning) {
                this.timeout = this.$timeout(this.setSpinning.bind(this), 100);
            } else {
                this.setSpinning();
            }
        },
        setSpinning: function() {
            this.spinningThrottled = this.spinning;
        }
    };

    myapp.controller("SpinnerController", ["$scope", "$timeout", controller]);

    myapp.directive("spinner", function () {
        return {
            restrict: "E",
            scope: {
                spinning: "=",
            },
            replace: true,
            controller: "SpinnerController",
            controllerAs: 'vm',
            bindToController: true,
            templateUrl: "Views_App/Components/Spinner.html"
        };
    });

    myapp.directive("spinnerGrid", function () {
        return {
            restrict: "E",
            scope: {
                spinning: "=",
            },
            replace: true,
            controller: "SpinnerController",
            controllerAs: 'vm',
            bindToController: true,
            templateUrl: "Views_App/Components/SpinnerGrid.html"
        };
    });
})();

旋转网格模板

<tr data-ng-if="vm.spinningThrottled">
    <td colspan="100">
            <i class="fa fa-spinner fa-spin"></i> Please wait...
    </td>
</tr>

使用

<table>
   <thead>...</thead>
   <tbody>
      <spinner-grid spinning="searching"></spinner-grid>
      <tr ng-repeat="...">..</tr>
   </tbody>
</table>

由于某种原因，指令的内容被移到表格之外？

编辑:问题可能是重复的，但 K.Toress 的答案不是重复的，因为它利用了 EA 限制

Answer 1

我认为这是表的正常行为，如果有 div或表内任何其他标签(不包括 <tr> )，但不包含 <td> 内部它会将其移除并将其放在 table 上。

在您的情况下，当 html 渲染时间(在 Angular 执行其脚本之前) html 检测到表格内有一个未占用的标签，该标签不在 td 内它将删除并放置在表格顶部，然后当 Angular 执行时间时，指令元素不在表格内，而是位于表格顶部。这就是它渲染在表格顶部的原因。

请检查您是否可以执行类似的操作，

<tbody>
  <tr  data-ng-if="vm.spinningThrottled"><spinner-grid spinning="searching"></spinner-grid></tr>
  <tr ng-repeat="...">..</tr>
</tbody>

SpinnerGrid.html

<td colspan="100">
    <i class="fa fa-spinner fa-spin"></i> Please wait...
</td>

或检查这个

指令作为 <tr> 的属性

<tbody>
  <tr spinner-grid spinning="searching"></tr>
  <tr ng-repeat="...">..</tr>
</tbody>

更改指令定义以支持指令作为属性。 restrict: "EA" .

myapp.directive("spinnerGrid", function () {
    return {
        restrict: "EA",
        scope: {
            spinning: "=",
        },
        replace: true,
        controller: "SpinnerController",
        controllerAs: 'vm',
        bindToController: true,
        templateUrl: "Views_App/Components/SpinnerGrid.html"
    };
});