Angular table directive

Question

我想製作表格指令，但我不知道該怎麼做。這是我的源代碼。

指令：

InterfaceModule.directive('gList', function() { 
    return { 
     restrict: 'AEC', 
     transclude: true, 
     templateUrl: 'interface/gList.html' 
    }; 
}); 

gList.html：

<table class="table table-condensed"> 
<tr> 
    <td style="width: 20px"> 
     <span class="icon-f-gear-small"></span> 
    </td> 
    <td ng-transclude> 

    </td> 
</tr> 
</table> 

控制器：

App.controller('ResultController', ['$scope', function($scope) { 
    $scope.testItems = ['element 1', 'element 2', 'element 3'] 
}]) 

HTML代碼：

<div ng-controller="ResultController"> 
    <g-list> 
     <a href="#" ng-click="someFunction()">{{item}}</a> 
    </g-list> 
</div> 

我需要在<tr>標記中使用ng-repeat，儘管我不想在指令模板中使用它，但我希望它在我的主html文件中使用。如果我在g-list標記（<g-list ng-repeat="item in testItems">）中使用它，我得到了數組中每個元素的單獨表，我需要一個表和等於數組大小的行數（在這種情況下，一個表包含3行）。所以問題是如何改變我的解釋指令。提前致謝！

UPDATE

謝謝回答。 現在有點更清楚了，但我仍然有幾個問題。主要的想法是，我想在最後的是這樣的：

<g-list icon="gear-small"> 
    <g-entry function="someFunction()">Sąrašo elementas 1</g-entry> 
    <g-entry link="/some/url" count="20">Sąrašo elementas 2</g-entry> 
    <g-entry link="/some/url" disabled="Netinkama objekto būsena">Sąrašo elementas 3</g-entry> 
</g-list> 

將有條目時我需要調用函數將會有條目，我將不得不去上CLIK事件的一些網址。

Answer 1

你能解釋一下你想達到的目的嗎？爲什麼你不想在你的指令中使用ng-repeat？是因爲你想在其他地方重新使用模板嗎？ 乍一看，除非您準備徹底切斷它，並且將其所有內容透露出來，否則我不認爲有任何方法可以在不包含ng-repeat的情況下在表級別保留該指令。如果你能忍受一個「tr」指令，這將是保持ng-repeat不受你的指令的最簡單的方法：我將指令限制爲<tr>，並將table直接放在你的html代碼中。

<div ng-controller="ResultController"> 
    <table class="table table-condensed"> 
     <g-list ng-repeat="item in items" src="item" fcn="someFunction()"> 

     </g-list> 
    </table> 
</div> 

有了您的模板現在看起來像：

<tr> 
    <td style="width: 20px"> 
     <span class="icon-f-gear-small"></span> 
    </td> 
    <td > 
     <a href="#" ng-click="fcn()">{{src}}</a> 
    </td> 
</tr> 

而且你的指令需要

scope { 
    src:'=', 
    fcn:'&' 
} 

取決於你想要達到什麼，以及您的關注與NG-重複是，還有其他一些事情要探討：你可以在你的模板中使用ng-include，你可能會放棄transclusion並將你的函數傳遞給你的指令...更多信息w不勝感激。

（EDITED以除去包含）

編輯2：好的，這是與兩個不同的條目的準系統溶液。有些東西或許可以得到改善，並且代碼可能會略有變化根據您的具體需求 公設：你的項目是這樣的：

item : { 
    type:yyy, // can take 'url' and 'function' 
    value:xxx 
} 

接口/ entry1.html，具有功能

<tr> 
    <td style="width: 20px"> 
     <span class="icon-f-gear-small"></span> 
    </td> 
    <td > 
     <a href="#" ng-click="fcn()">{{item.value}}</a> 
    </td> 
</tr> 

接口/entry2.html，與URL

<tr> 
    <td style="width: 20px"> 
     <span class="icon-f-gear-small"></span> 
    </td> 
    <td > 
     <a href="{{item.url}}">{{item.value}}</a> 
    </td> 
</tr> 

接口/ gList.html，指令模板（NG-重複又回來了）

個

<table class="table table-condensed"> 
    <div ng-repeat="item in items" ng-switch="item.type"> 
     <ng-include src="'interface/entry1.html'" ng-switch-when="function"/> 
     <ng-include src="'interface/entry2.html'" ng-switch-default/> 
    </div> 
</table> 

directive.js

InterfaceModule.directive('gList', function() { 
    return { 
     scope { 
      items:'=', 
      fcn:'&' 
     } 
     restrict: 'AEC', 

     templateUrl: 'interface/gList.html' 
    }; 
}); 

HTML代碼

<div ng-controller="ResultController"> 
    <g-list items="myItems" fcn="someFunction()"> 
</div> 

請注意，該指令範圍現在從您的主要適用範圍隔離，從而無法訪問您不要任何範圍變量」明確地饋送（在這裏，項目和fcn）。如果你想避免太多的交互和混亂（儘管仍然存在一些可能的交互：「=」表示雙向綁定，所以你的指令中的改變項目將在你的主範圍中被重新反射），這通常是一種好的做法。再次，昂然，有多種方式來做到這一點。例如，你可以完全放棄gList，而是爲gEntry創建一個小指令，並循環它。這樣，您可以直接將「類型」輸入到指令中，而不是將其添加到項目中。

Answer 2

接過從here調整的一點點，這是一個有重複內模板和範圍指令傳遞引用的代碼：如果你想導入模板

app.directive('myTable', function($compile){ 
    return { 
    restrict: 'E', 
     scope: { 
      items: '=' 
     }, 
     compile: function (tElement) { 
      // Extract the children from this instance of the directive 
      var children = tElement.children(); 

      var tableTemplate = 
       '<table>' + 
       '<tr ng-repeat="item in items">' + 
        '<td>first column</td>' + 
        '<td insert></td>' + 
       '</tr>' + 
       '</table>'; 

      var table = angular.element(tableTemplate); 

      // Find the 'insert' attribute and append children 
      angular.element(table[0].querySelector('[insert]')) 
       .append(children) 
       .removeAttr('insert'); 

      // Append this new template to the directive element 
      tElement.html(''); 
      tElement.append(table); 

      // Create a compile function that we can call from the linker 
      var compile = $compile(table); 

      return function(scope) { 
       // In the linker, compile against the scope 
       compile(scope); 
      }; 
    } 
    }; 
}); 

Here's an example in JSFiddle

其他地方你可以使用$templateCache