角指令顯示錯誤的地方

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

角指令顯示錯誤的地方

回答

相關問題