javascript - 多个指令和 ng-transclude

Question

我在多个指令的元素上使用 ng-transclude 时遇到问题。

我有两个指令，其中一个实例化另一个：

//Basic first directive, checks if the second should be instantiated
app.directive('configModal', ['$compile', function($compile){
    return {
        restrict: 'C',
        scope: {
            manage: '=manage',
        },
        controller: function($scope, $element, $attrs, $transclude) {
            //used to instantiate the second directive which is 'C' restricted
            $element.addClass('widget-config-managed');
            $compile($element);
            };
        }
    };
}]);

//Second directive, has two wrap the content of the element by transclusion
app.directive('configManaged', ['$compile', function($compile){
    return {
        restrict: 'C',
        template: '<div ng-transclude>Some more content</div>',
        transclude: true,
        compile: function(element){
            console.log('compile from managed');
        }
    };
}]);

HTML 看起来像这样：

<div class="widget-config-modal">
<div>
    Just some div.
</div>

问题是 div 的原始内容：

    <div>
        Just some div.
    </div>

没有被嵌入，而是被模板完全覆盖。

如何修复嵌入？

Answer 1

我认为您的指令不起作用。您不能在指令前加上widget-. 如果你愿意，你可以在它前面加上x-或data-

所以<div class="widget-config-modal">不要工作。

相反，您可以执行以下操作：

<div class="config-modal">
<!-- OR -->
<div class="data-config-modal">
<!-- OR -->
<div class="x-config-modal">

Answer 2

您需要ng-transclude在第一个指令中创建一个以包含当前的内部节点<div> Just some div. </div>。在第二个指令中，不需要ng-transclude.

在configModal 中：

transclude: true,
template: '<div><div ng-transclude></div><div class="config-managed"></div></div>'

在configManaged中：

template: '<div>Some more content</div>'

Demo