角錶行指令不表裏面

我想行「isrcrow」指令添加到表如下渲染：角錶行指令不表裏面

<table class="table"> 
     <thead><tr> 
        <th>Artist Name</th> 
        <th>Track Title</th> 
        <th>Version</th> 
        <th>Track Duration</th> 
        <th>Recording Year</th> 
        <th></th> 
       </tr> 
     </thead> 
     <tbody> 
      <isrcrow></isrcrow> 
     </tbody>  

    </table>

這裏的指令：

(function() { 
    var isrcorderapp; 

    isrcorderapp = angular.module("isrcorderapp", []); 

    isrcorderapp.controller("isrcordercontroller", function($scope, $http) { 
    return $scope.recordingTypes = [ 
     { 
     type: 'Single' 
     }, { 
     type: 'Album' 
     }, { 
     type: 'Live' 
     }, { 
     type: 'Concert' 
     }, { 
     type: 'Instrumental' 
     } 
    ]; 
    }); 

    isrcorderapp.directive("isrcrow", function() { 
    return { 
     restrict: 'E', 
     template: '<tr>\ 
       <td><input id="artist" ng-model="name"/></td>\ 
       <td><input id="track"/></td>\ 
       <td><select id="isrctype" ng-model="isrctype" ng-change="setState(state)" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"></select></td>\ 
       <td><input id="duration"/></td>\ 
       <td><input id="year"/></td>\ 
       <td><input type="button" value="Add ISRC" onclick="AddIsrc()" class="btn btn-small btn-success" />\ 
        <input type="button" value="Delete" onclick="RemoveIsrc()" class="btn btn-small btn-danger" />\ 
       </td>\ 
      </tr>', 
     scope: { 
     name: '=' 
     }, 
     link: function(scope, element, attr) {} 
    }; 
    }); 

}).call(this);

這個問題我正在體驗的是isrcrow指令不會在表體內呈現。它呈現在表格之外和之上：

有沒有人知道可能會導致這種行爲？

來源

2014-02-26 Milligran

如果你是沒辦法了，我建議做'isrcrow'的屬性，而是有''在你的HTML，這顯然意味着要修改模板代碼排除''s。 – miqid

這個建議奏效了。我怎麼能讓這個答案 – Milligran

我有同樣的問題。但我的東西在IE中，而不是在Chrome中。 – Gisway

我想這是因爲你沒有指定replace: true爲isrcrow指令。其結果是，最終的標記將如下所示：

<isrcrow> 
    <tr> 
     <td>...</td> 
     ... 
     <td>...</td> 
    </tr> 
</isrcrow>

這將是一個<tbody>的直接孩子，這是invalid markup。因此，通過將<isrcrow>標籤移動到表格外，大多數現代瀏覽器（例如Chrome和Firefox）都會嘗試「修復」您的標記以使其有效。

相反，如果添加replace: true到您的指令規範，該<isrcrow>元素將不會被渲染，瀏覽器應該只能看到有效的標記，而不是嘗試「修理」它。

來源

2014-02-26 02:21:22 GregL

對於老版本的Angular，對於模板根目錄爲''的指令，存在'replace：true'的問題。（參見https://github.com/angular/angular.js/issues/1459） – miqid

添加我的評論摘要作爲答案，因爲它似乎幫助了OP。 :-)

由於GregL指出，在與restrict: 'E'和<tr>作爲根模板節點將導致無效的標記一個指令省略replace: true，從而引發該行不正確的渲染。

但是，對於那些使用版本爲1.2.13 (romantic-transclusion)的Angular的版本，此解決方案由於issue已被記錄而不適用。

解決方法是改爲使用指令作爲屬性（即restrict: 'A'），並適當地修改模板，以使<tr>不再是根模板節點。這將允許使用replace: true。

來源

2014-02-28 06:59:09 miqid

以前的答案是正確的，但我發現他們有點難以理解/應用，所以總結了我如何與他們的幫助下解決了這個問題：

表

<tbody> 
    <tr isrcrow ng-repeat="..."></tr> 
</tbody>

的isrcow指令模板（無TR，沒有單個根）

<td></td> 
<td></td> 
...

的isrcrow指令與

restrict: 'A' 
replace: false

個

最終結果是

<tbody> 
    <tr isrcrow> 
     <td></td> 
     <td></td> 
     ... 
    </tr> 
    <tr isrcrow> 
     <td></td> 
     <td></td> 
     ... 
    </tr> 
    ... 
</tbody>

來源

2016-06-22 10:10:30 CapK

角錶行指令不表裏面

回答

相關問題