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>，则会将其删除把它放在桌子上。

在你的情况下，当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"
    };
});

Angular是表外的渲染指令

1 个答案: