Question

我正在尝试将列表项转换为我的自定义指令。

我的'list'自定义指令的模板很简单：

 <ul>
     <li>directive item</li>
     <li>directive item</li>
     <li>directive item</li>
     <div ng-transclude><div>
 </ul>

然后我就这样使用我的指令

<list>
    <child-list></child-list>
</list>

childList模板就是：

    <li>child item</li>
    <li>child item</li>
    <li>child item</li>

然而，html的最终结果都搞砸了。

<ul>
    <li>directive item</li>
    <li>directive item</li>
    <li>directive item</li>
    <div ng-transclude>
        <li>child item</li>
        <li>child item</li>
        <li>child item</li>
    <div>
</ul>

理想情况下，我想在我的子指令中使用replace：true但它抱怨没有根元素，所以我必须将它包装在div中，这会使样式陷入困境。

我想要的最终结果是

<ul>
    <li>directive item</li>
    <li>directive item</li>
    <li>directive item</li>
    <li>child item</li>
    <li>child item</li>
    <li>child item</li>
</ul>

这是可能的还是我必须提出一个css解决方案。

提前致谢！

更新现已解决css解决方案

Answer 1

您可以将ng-transclude用作元素本身。这将从你的最终html中保留额外的div等。 ng-transclude元素仍然存在，但它对浏览器来说是“透明的”。

模板最终看起来像这样：

<ul>
     <li>directive item</li>
     <li>directive item</li>
     <li>directive item</li>
     <ng-transclude></ng-transclude>
 </ul>

以this fiddle为例，查看

Answer 2

因为您要求替换ng-transclude元素，您可以在指令的link方法中创建自己的transclude函数。

首先，在您的父模板中，您将创建一个自定义的“可替换”元素来代替ng-transclude元素：

<script type="text/ng-template" id="parent.html">
    <ul>
        <li>directive item</li>
        <li>directive item</li>
        <li>directive item</li>
        <span class="replace"></span>
    </ul>
</script>

接下来，在父指令中包含一个链接方法，该方法可以找到自定义replace元素，并将其替换为您的已转换元素。请注意，transclude调用它的内容进行解包。更多关于下一个......

myApp.directive('myDirective', function() { 
    return {
        transclude: true,
        templateUrl: 'parent.html',
        replace: true,
        link: function(scope, elem, attrs, ctrl, transclude) {
            elem.find('.replace').replaceWith(transclude().contents().unwrap());
        }
    };
});

最后，在你的child指令中，将replace设置为false，因为Angular抱怨没有root元素。父级中的transclude方法返回子指令结果（使用根元素child-list）。所以，我们然后跳进并打开内容（列表项）;基本上替换了child-list元素。

myApp.directive('childList', function() {
    return { 
        templateUrl: 'children.html',
        replace: false
    };
});

我已更新jsFiddle here。

带有列表项的angular指令

2 个答案: