Question

好的，我正在使用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);
                }
            }
        }
    }
})();

Answer 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>

嵌套在表体中的Angular指令呈现在表上方

1 个答案: