Директива AngularJS с ngTransclude, не показывающая содержимое {{bound}}

Question

Я пытаюсь создать директиву Angular, которая создает стандартизованную структуру таблицы, которую я хочу использовать вокруг моего приложения.

Я хочу указать структуру tr, когда объявляю директиву в HTML, чтобы иметь разные макеты в зависимости от передаваемых данных. Однако я не могу получить содержимое ng- transclude для фактического рендеринга.

Plunker: Example

Я хотел следующее:

<custom-table table="data"> 
    <td> 
    {{row.Username}} 
    </td> 
    <td> 
    {{row.FirstName}} 
    </td> 
    <td> 
    {{row.LastName}} 
    </td> 
</custom-table> 

быть закачиваться в пределах шаблона.

Как я могу найти теги {{row.Username}} и т. Д. В ng-transclude в угловой директиве?

Edit1: Я думаю, что это такой же вопрос, который я только что нашел, хотя большинство топ проголосовали ответ, кажется, рекомендуем избегать использования таблицы, TR, TD и т.д. в директивах: \

Answer 1

Я нашел работу вокруг, которая решает эту проблему для меня.

Я обновил плункер с помощью рабочего примера. Я должен был создать директиву:

app.directive('myTransclude', function() { 
    return { 
     compile: function(tElement, tAttrs, transclude) { 
      return function(scope, iElement, iAttrs) { 
       transclude(scope.$new(), function(clone) { 
        iElement.append(clone); 
       }); 
      }; 
     } 
    }; 
}); 

я нашел вопрос here в комментариях.

Мне также пришлось обновить директиву, чтобы она использовала таблицу на основе CSS/div, а не используя фактическую таблицу HTML.

Answer 2

Это не ответьте на свой вопрос, но я думаю, что это более общий способ делать то, что вы хотите.

Первый передать список столбцов, который вы хотите отобразить в вашей директиве:

<custom-table table="data" columns="columns"> 
</custom-table> 

В контроллере:

app.controller('MainCtrl', function($scope) { 
    $scope.data = [ 
    {Username: "Test1", FirstName: "Bill", LastName: "Jones"}, 
    {Username: "Test2", FirstName: "Sophie", LastName: "O'Grady"}, 
    {Username: "Test3", FirstName: "Tim", LastName: "Cross"} 
    ]; 

    $scope.columns = ["Username", "FirstName", "LastName"] 
}); 

В вашей директиве:

app.directive('customTable', ['$compile', function($compile){ 
    return { 
    restrict: 'E', 
    templateUrl: 'tableTemplate.html', 
    scope: { 
     table: '=', 
     columns: '=' 
    } 
    }; 
}]); 

И, наконец, изменения ваш шаблон для:

<div> 
    <table> 
    <thead> 
     <tr> 
     <th ng-repeat="col in columns">{{ col }}</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="row in table"> 
     <td ng-repeat="col in columns"> 
      {{ row[col] }} 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

И вот обновленный plunker: http://plnkr.co/edit/dYwZWD2jB2GsmnvmuSbT