javascript - 在指令中使用 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>'));
        }
    };
});

通过以下方式调用：

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