Javascript 多指令和ng转移

我在对多个指令的元素使用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');
        }
    };
}]);

//Basic first指令，检查是否应实例化第二个指令
app.directive（'configModal'，['$compile'，function（$compile）{
返回{
限制：“C”，
范围：{
管理：'=管理'，
},
控制器：函数（$scope、$element、$attrs、$transclude）{
//用于实例化受“C”限制的第二个指令
$element.addClass（'widget-config-managed'）；
$compile（$element）；
};
}
};
}]);
//第二个指令，有两个通过转换来包装元素的内容
app.directive（'configManaged'，['$compile'，function（$compile）{
返回{
限制：“C”，
模板：“更多内容”，
是的，
编译：函数（元素）{
log（'compilefromsmanaged'）；
}
};
}]);

HTML看起来是这样的：

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

只是一些div。

问题在于该部门的原始内容：

    <div>
        Just some div.
    </div>

只是一些div。

未被排除，但被模板完全覆盖

---

如何修复转换？

我认为你的指令不起作用。不能在指令前面加

小部件-

。如果需要，可以在其前面加上

x-

或

data-

所以

不起作用

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

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

---

您需要在第一个指令中创建一个

ng transclude

，将当前内部节点

仅包含一些div.

。在第二条指令中，不需要

ng transclude

在configModal中：

transclude:true，
模板：“”

在configManaged中：

模板：“更多内容”

---

尝试为您的configManaged指令使用

replace:false

。您是否尝试在“configManaged”指令配置中使用“replace:false”？另外，看看这个，我尝试了“replace:false”，它似乎没有什么区别。指令似乎在使用“widget-”前缀时运行良好，问题更具体的是转换。

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

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