嵌套在表格主体中的 Angular 指令呈现在表格上方答案

【问题标题】：Angular directive nested in table body renders above table嵌套在表格主体中的 Angular 指令呈现在表格上方
【发布时间】：2017-09-25 08:51:45
【问题描述】：

好的，我正在使用 Angular 1.5.7，我正在尝试使用 ng-repeat 和其他东西进行一些表格渲染。这是我的表格标记的样子：

    <table class="table table-hover">
        <thead>
            <tr>
                <td>Property name</td>
                <td>Property value</td>
            </tr>
        </thead>
        <tbody>
            <adm-preset-property
             ng-repeat="(propertyName, definition) in 
             componentDefinition.component_properties"
             property-name="propertyName"
             property-value="component.component_properties"
             property-definition="definition"></adm-preset-property>
        </tbody>
    </table>

<adm-preset-property> 指令具有 replace: true 属性，并从根 <tr></tr> 标记呈现。

现在循环工作正常，但是，表格行不是在表格主体内呈现，它们是嵌套的，而是在表格上方呈现。我最终得到

<tr>
    {{ content }}
</tr>
<tr>
    {{ content }}
</tr>
<tr>
    {{ content }}
</tr>
<table>...</table>

更糟糕的是，我似乎无法在 JSFiddle 上重现这一点。我做错了什么？

编辑：根据要求，这是<adm-preset-property>的模板

模板：

<tr>
    <td>
        <span data-toggle="tooltip" ng-attr-title="{{ ::propertyDefinition.description }}">{{ ::propertyDefinition.name }}</span>
    </td>
    <td ng-switch="propertyDefinition.editor_type">
        <div ng-switch-when="select">
            <ui-select append-to-body="true" ng-model="propertyValue[propertyName]" theme="bootstrap">
                <ui-select-match placeholder="Select option...">{{ $select.selected.value }}</ui-select-match>
                <ui-select-choices repeat="option.key as (key, option) in propertyDefinition.editor_properties.options | filter:{'value':$select.search} track by $index"
                    ng-value="key">
                    {{ option.value | highlight: $select.search }}</ui-select-choices>
            </ui-select>
        </div>
        <div ng-switch-when="boolean">
            <input type="checkbox" ng-model="propertyValue[propertyName]">
        </div>
        <div ng-switch-when="float">
            <input type="range" step="0.01" ng-model="propertyValue[propertyName]" min="{{propertyDefinition.editor_properties.min}}"
                max="{{propertyDefinition.editor_properties.max}}">&nbsp;{{ propertyValue[propertyName] }}
        </div>
        <div ng-switch-when="color">
            <input type="color" style="width: 75%;" ng-model="propertyValue[propertyName]">
        </div>
        <div ng-switch-when="int">
            <input type="number" style="width: 75%;" ng-model="propertyValue[propertyName]" min="{{propertyDefinition.editor_properties.min}}"
                max="{{propertyDefinition.editor_properties.max}}"> <br/>
            <small>{{::propertyDefinition.editor_properties.min}} - {{::propertyDefinition.editor_properties.max}}</small>
        </div>
        <div ng-switch-default>
            <input type="text" style="width: 75%;" ng-bind="propertyValue[propertyName]" />
        </div>
    </td>
</tr>

指令：

(function() {
    "use strict";

    angular
        .module('adomee.admin')
        .directive('admPresetProperty', admPresetProperty);

    /* @ngInject */
    function admPresetProperty($log)
    {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                propertyName: '=',
                propertyValue: '=',
                propertyDefinition: '='
            },
            templateUrl: 'app/preset/components/preset-property.tmpl.html',
            link: function($scope, $element, $attributes) {
                if ($scope.propertyDefinition.editor_type === 'select' && typeof($scope.propertyDefinition.defaultValue) === 'number') {
                    $scope.propertyValue[$scope.propertyName] = String($scope.propertyDefinition.defaultValue);
                }
            }
        }
    }
})();

【问题讨论】：

请显示 admPresetProperty 指令的代码，即使您无法重现该问题，JSFiddle 链接也会有所帮助。
仅供参考 - 不是一个答案，但与其他人相关的是，replace 已被弃用。见docs.angularjs.org/api/ng/service/$compile

标签： html angularjs html-table

【解决方案1】：

好的，经过我的老板的一些研究和咨询，我们得出的结论是，Angular 在加载主标记后自然会将指令的模板编译到 DOM 中。

由于该表需要<tr> 标记后跟<td>，但它会运行到我的自定义标记中，它会删除自定义标记并将其放置在表之外，然后编译到我的模板，导致实际表格顶部的表格行。

我所做的是：

将指令中的restrict: 'E' 更改为restrict: 'A'。
从中删除replace 属性。
删除根<tr>标签，留下两个<td>标签。
将指令放入表中的<tr> 和ng-repeat 上。

这就是它现在的样子。

<tr adm-preset-property 
    ng-repeat="(propertyName, definition) in componentDefinition.component_properties"
    property-name="propertyName"
    property-value="component.component_properties"
    property-definition="definition"></tr>

【讨论】：