角指令显示错误的地方

我在角度很新的，我在做一个应用程序，我使用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>

来源

2016-02-29 João Paulo

这是一个非常普遍的问题，即浏览器有特殊的表格绘制方法，并且不具有角合身。它会尝试通过搜索tr，td，thead等来呈现<table> ，并且只是将没有想到的东西踢出去，如app-info。这将提上table的顶部未知元素，并呈现休息。

之一来解决它的办法就是让你的指令的属性，而不是一个元素：

restrict: 'A', 

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

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

你可以theorically使用replace : true的指令配置，但它已被弃用，因为有已知的bug：

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

来源

2016-02-29 15:42:21

我认为浏览器不喜欢有一个app-info标签内tbody。之前Angular.js可以做它的魔力，浏览器尝试通过表外移动app-info“修理”你无效的HTML。

你可以尝试改变restrict: 'A'和使用<tr app-info...代替。

然而，它通常不是最好在模板的根具有表相关的标记。

来源

2016-02-29 15:42:48 mostruash

角指令显示错误的地方

回答

相关问题