如何將div的內容作爲表格標題進行傳輸？

Question

我做了一個自定義的指令對角JS一個表格，它表示這樣

`<div mytable api="data"> 
     <div col="A"></div> 
     <div col="B"></div> 
    </levelOne>` 

myTable的指令有一個與之關聯的templateUrl具有表和分頁選項。現在我有硬編碼的列名稱。但是我希望我的列名col = A和col = B在父指令mytable中。問題是mytable被templateUrl替換，我無法獲取內部元素。

Answer 1

我不明白你想用什麼來實現，但想提供一個解決方案，你可以建立。

聲明你的指令（注意是複姓元素名稱）：

<div mytable api="data"> 
    <div col="ID"></div> 
    <div col="NAME"></div> 
</div> 

現在定義指令mytable爲：

var myApp = angular.module('myApp',[]); 
myApp.run(function($rootScope) { 
    $rootScope.data = [{ 
     id: 1, 
     name: 'One' 
    }, { 
     id: 2, 
     name: 'Two' 
    }]; 
}); 
myApp.directive('mytable', function() { 
    return { 
     restrict: 'AE', 
     transclude: true, 
     template: 
      '<table>\ 
       <thead></thead>\ 
       <tbody>\ 
        <tr ng-repeat="d in data">\ 
         <td ng-bind="d.id"></td>\ 
         <td ng-bind="d.name"></td>\ 
        </tr>\ 
       </tbody>\ 
      </table>', 
     controller: function($scope, $element, $attrs) { 
      $scope.data = $scope.$eval($attrs.api); 
     }, 
     link: function(scope, element, attrs, NullController, $transcludeFn) { 
      $transcludeFn(function(tElement) { 
       var headHTML = '<tr>'; 
       for (var i = 0; i < tElement.length; i++) { 
        if (tElement[i].nodeType === 1) { 
         headHTML+= '<td>' + angular.element(tElement[i]).attr('col') + '</td>'; 
        } 
       } 
       headHTML+= '</tr>'; 
       element.find('thead').html(headHTML); 
      }); 
     } 
    }; 
}); 

新演示：http://jsfiddle.net/codef0rmer/aa18tuzf/

舊演示：http://jsfiddle.net/codef0rmer/yy4rc49L/