Question

我是Angular的新手，我正在做一个使用ngTable的应用程序：

var app = angular.module('myApp', ["ngTable"]).controller('mainController', function($scope, NgTableParams) {
    $scope.data = [
        {
            a : "3",
            b : "test" 
        },
        {
            a : "3",
            b : "test" 
        },
        {
            a : "3",
            b : "test" 
        }
    ];
    $scope.tableParams = new NgTableParams({}, { dataset: $scope.data});
});
app.directive('appInfo', function() { 
    return { 
        restrict: 'E', 
        scope: { 
            info: '=infoData' 
        }, 
        template:
        "   <tr> " +
        "       <td filter=\"{ a: 'text'}\" sortable=\"'a'\">{{info.a}}</td> " +
        "       <td filter=\"{ b: 'text'}\" sortable=\"'b'\">{{info.b}}</td> " +
        "   </tr> "
    };  
});

这是html：

<div class="main" ng-app="myApp" ng-controller="mainController">
    <table ng-table="tableParams" class="table" show-filter="true">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
            </tr>
        </thead>
        <tbody>
            <app-info ng-repeat="info in data" info-data="info" />
        </tbody>
    </table>
</div>

问题是<app-info>标记位于div上方table内而不是tbody的错误位置。我错过了什么？

发生了什么事：

<div class="main" ...>
    <app-info ... />
    <app-info ... />
    ...
    <table ...
</div>

什么是正确的：

<div class="main" ...>
    <table ...>
        <thead>...</thead>
        <tbody>
            <app-info ... />
            <app-info ... />
            ...
        </tbody>
        ...
</div>

Answer 1

这是一个非常常见的问题，浏览器具有特殊的表格渲染方法，并且不适合角度。它会尝试渲染<table> 通过搜索tr，td，thead等，然后点击不应该在这里的内容，例如app-info。它会将未知元素放在table之上，然后渲染其余元素。

解决它的一种方法是使你的指令成为属性而不是元素：

restrict: 'A', 

<tbody>
     <tr app-info ng-repeat="info in data" info-data="info">
     </tr>
</tbody>

这样浏览器就不会删除app-info，而angular会有时间正确呈现。

你可以在指令配置中理论上使用replace : true，但它已被弃用，因为存在已知的错误：

replace ([DEPRECATED!], will be removed in next major release - i.e. v2.0)

Answer 2

我认为浏览器不希望在Timer time = new Timer(1000 / 20, new ActionListener() { @Override public void actionPerformed(ActionEvent e) { boolean refresh = false; switch (verticalMovement) { case UP: s2.changeY(UP); refresh = true; break; case DOWN: s2.changeY(DOWN); refresh = true; break; default: break; } switch (horizontalMovement) { case RIGHT: s2.changeX(RIGHT); refresh = true; break; case LEFT: s2.changeX(LEFT); refresh = true; break; default: break; } if (refresh == true) { pane.repaint(); } } });中包含app-info标记。在Angular.js发挥其魔力之前，浏览器会尝试通过在表格外移动tbody来“修复”无效的HTML。

您可以尝试更改app-info并改为使用restrict: 'A'。

但是，通常不希望在模板的根目录中使用与表相关的标记。

Angular指令显示在错误的位置

2 个答案: