在指令中使用ng-show

Question

我试图完成以下行为：

1. 使用ng-repeat循环数组，从而生成表行。
2. 在每一行之后添加一个额外的隐藏行(“详细信息”)(不能使用多个tbody元素)

我做了一个指令，它是tr标记的一个属性。生成第二行，但不隐藏。除了ng-show无法工作和显示“详细信息”行外，一切都按预期工作。

我的指令：

'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>'));
        }
    };
});

呼叫via：

<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)));
        }
    };
});

这将允许角线连接该ng-show，并做所有它必须做的幕后工作，以了解它。否则，角不知道它的存在。