Question

我有一个属性指令，它只是将类名添加到应用它的元素。该属性指令应用于表格单元格<td>元素。当我在指令定义中有transclude: true时，它会替换表格单元格内容。我无法弄清楚为什么。有人帮助我，因为我第一次面对这个问题吗？

根据定义，我的理解是transclude应该包含已经存在的任何内容，但不确定我为什么要面对这个问题。有人可以提出解决方案吗？

这是代码，

angular.module('app', []).directive('indicator', function () {

return {
    restrict: 'AC',
    replace: true,
    transclude: true,
    link: function ($scope, $elem, $attrs) {
        if($attrs.type) {
            $elem.addClass('indicator-'+$attrs.type);
        }
        else {
            $elem.addClass('indicator');    
        }
    }
};});

html中的指令定义如下，

<td indicator type="someType">5000</td>

正如我前面提到的，如果我将其转换为false，那么它会按预期工作。但是，当我将其转换为true时，它会添加类，表格单元格内容会消失。

Answer 1

删除replace和transclude属性。

你显然不想替换元素和replace is deprecated无论如何。

您也没有使用ngTransclude指令（事实上，您根本没有指令模板），因此不需要transclude。

您可以将整个内容简化为

.directive('indicator', function() {
    return {
        restrict: 'AC',
        link: function(scope, element, attrs) {
            element.addClass(attrs.type ? 'indicator-' + attrs.type : 'indicator');
        }
    };
})

表格单元格中的角度转换

1 个答案: