Question

我想为表TBODY编写一个指令，以便在它为空时显示一些文本。我想通过编写一个指令来检测表的TBODY是否有任何子TR，如果没有，则显示一些文本。

我不想使用ng-if="model.entries.length == 0"，因为我可能会在那里创建一个TR来创建不属于条目的新条目。

我写的指令目前只运行一次，因为它只运行一次。当条目更改时，指令将不再运行，因此空文本仍显示

baseModule.directive('emptyTbody', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            if (element.find('tr').length == 0) {
                element.addClass('empty');
            } else {
                element.removeClass('empty');
            }
        }
    }
});

是否有可能编写一个在范围变化时运行的指令，如常规角度行为？或者如果通过指令无法实现这一点，还有其他方法可以实现吗？

这是Html

<tbody empty-tbody>
    <tr ng-if="isCreating()">
        <td>
            <input ng-model="creatingItem.Name"/>
        </td>
    </tr>
    <tr ng-repeat="item in model.entries" >
        <td>
            <input ng-model="item.Name"/>
        </td>
    </tr>
</tbody>

Answer 1

创建一个隔离范围并将手表放在那里

喜欢这个

baseModule.directive('emptyTbody', function() {
    return {
        restrict: 'A',
        scope: {
            source: '='
        },
        link: function(scope, element, attrs) {

            scope.$watch("source", function(nv) {
                if (nv) {
                    if (nv.length == 0)
                        element.addClass('empty');
                    else
                        element.removeClass('empty');
                } else
                    element.addClass('empty');
            });

        }
    }
});

HTML

<tbody empty-tbody source="model.leps">

修改

如果您只想使用元素。

您可以使用匿名功能观看。

试试这个

baseModule.directive('emptyTbody', function() { return { restrict: 'A', link: function(scope, element, attrs) { scope.$watch(function() { return element.find('tr').length; }, function(nv) { if(nv){ console.log("Table has data") } else console.log("Table has no data"); }); } } });

的 JSFIDDLE

每次调整范围时，指令都可以运行吗？

1 个答案: