Использование ng-show в директиве

Question

Я пытаюсь добиться следующего поведения:

1. Цикл массива с ng-repeat в результате чего строки таблицы.
2. Добавьте дополнительную скрытую строку ("детали") после каждой строки (нельзя использовать несколько элементов tbody)

Я сделал директиву, которая является атрибутом tr тег. Второй ряд генерируется, но не скрывается. Все работает как положено, кроме ng-show не работает и отображается строка "detail".

Моя директива:

'use strict';
app.directive('entryDetails', function () {
    return {
        restrict: 'A',
        scope: {
            entry: '=',
        },
        link: function(scope,element,attrs) {
            scope.entry.showDetails = false;
            element.after(angular.element('<tr class="entry-details" ng-show="entry.showDetails" id="entry-details-'+scope.entry.id+'"><td colspan="5">Details...</td></tr>'));
        }
    };
});

Вызывается через:

<tr ng-repeat="entry in  entries track by entry.id" id="entry-{{entry.id}}" entry-details entry="entry">

Что мне для этого нужно ng-show работает как в шаблоне?

Заранее спасибо!

Answer 1

Вам нужно $compile второй <tr>,

app.directive('entryDetails', function ($compile) {
    return {
        restrict: 'A',
        scope: {
            entry: '=',
        },
        link: function(scope,element,attrs) {
            scope.entry.showDetails = false;
            var t = '<tr class="entry-details" ng-show="entry.showDetails" id="entry-details-'+scope.entry.id+'"><td colspan="5">Details...</td></tr>';
            element.after(angular.element($compile(t)(scope)));
        }
    };
});

Это позволит Angular подключить ng-show и делай все, что нужно, за кулисами, чтобы знать об этом. Иначе Angular не знает, что он существует.