javascript - 多个指令和 ng-transinclude

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">