角在表外呈现指令。

Question

我们使用的是角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>中使用，它将删除该标记并将其放在表中。

在您的示例中，当html呈现时间(在角执行其脚本之前) html检测到表中有一个未分配的标记，而该标记不在td中，它将移除并放置在表的顶部，然后当角执行时间时，指令元素不在表中，而是位于表的顶部。这就是为什么它在桌面上呈现的原因。

请检查一下你能做这样的事，

<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"
    };
});