Question

我正在尝试完成以下行为：

循环使用ng-repeat的数组，从而产生表格行。
在每行之后添加额外的隐藏行（“详细信息”）（不能使用多个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>'));
        }
    };
});

通过：

<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并不知道它存在。

在指令中使用ng-show

1 个答案: