在模板中非法使用ngTransclude指令！手动进行移植时

Question

我很遗憾地询问是否有可能在指令模板中两次转换指令的内部内容（克隆它并将其插入模板中的两个位置）。

一个非常有帮助的人帮助我把这个笨蛋放在一起。

http://plnkr.co/edit/k2UB1o4CTHtZ1voS0OKN?p=preview

它似乎起初工作。当我使用任何使用transclusion本身的子元素时，问题就来了。我得到的错误是......

[ngTransclude：orphan]在模板中非法使用ngTransclude指令！没有找到需要转换的父指令。元素：

例如，我有一个带有以下定义的按钮指令。

angular.module('s4p.directives').directive('s4pButton', function () {

    return {
        restrict: 'E',
        scope: {
            icon: '@'
        },
        transclude: true,
        replace: true,
        template: getTemplate
    };

    function getTemplate(element, attr) {

        var btnType = (typeof attr.type === 'undefined') ? 'button' : attr.type;

        return  '<button s4p-button type="' + btnType + '">'+
                    '<s4p-button-content ng-transclude></s4p-button-content>'+
                    '<s4p-button-icon ng-if="icon">'+
                        '<s4p-icon href="{{icon}}"></s4p-icon>'+
                    '</s4p-button-icon>'+
                '</button>';
    }

});

只要我将其中一个按钮放在工具栏中并尝试克隆它，我就会收到上述错误。

修改

带有完整示例的新PLUNKR

http://plnkr.co/edit/uK8r4EA2IPRnYKfjWNVG?p=preview

非常感谢任何帮助。

Answer 1

问题代码

该指令试图在一次调用transclude函数时进行双重转换。

//PROBLEM Code
link: function(scope, element, attrs, controller, transclude) {
    transclude(function(clone, scope) {
        element.find('[transclude-main]').replaceWith(clone);
        element.find('[transclude-overflow]').replaceWith($compile(clone.clone())(scope));
    });
}

正确代码

要将指令内容转换为模板中的两个位置，请调用两次转换功能。

app.directive('toolbar', function($compile) {
    return {
        restrict: 'E',
        scope: {},
        transclude: {

        },
        template: 
            '<toolbar-main><div transclude-main></div></toolbar-main>' +
            '<toolbar-overflow><div transclude-overflow></div></toolbar-overflow>',
        //CORRECTED code
        link: function(scope, element, attrs, controller, transclude) {
            transclude(scope, function(clone) {
                element.find('[transclude-main]').replaceWith(clone);
            });
            transclude(scope, function(clone) {
                element.find('[transclude-overflow]').replaceWith(clone);
            });
        }
    };
});

如果您需要新的范围进行转换，可以使用scope.$new()创建它们。

var newScope = scope.$new();
transclude(newScope, function(clone) {
    element.find('[transclude-main]').replaceWith(clone);
});

有关创建新范围的详细信息，请参阅AngularJS $rootScope.scope API Reference -- $new。

使用AngularJS jqLit​​e

AngularJS jqLit​​e是一个微小的API兼容的jQuery子集，它允许Angular以跨浏览器兼容的方式操作DOM。 jqLit​​e仅实现最常用的功能，目标是占用空间非常小。 ¹

jqLit​​e的find方法不支持属性选择器。要做 上面的示例与jqLit​​e兼容，请使用自定义标记作为转换目标。

app.directive('toolbar', function($compile) {
    return {
        restrict: 'E',
        scope: {},
        transclude: {},
        template: 
            '<toolbar-main><my-main></my-main></toolbar-main>' +
            '<toolbar-overflow><my-overflow></my-overflow></toolbar-overflow>',
        //CORRECTED code
        link: function(scope, element, attrs, controller, transclude) {
            transclude(scope, function(clone) {
                element.find('my-main').replaceWith(clone);
            });
            transclude(scope, function(clone) {
                element.find('my-overflow').replaceWith(clone);
            });
        }
    };
});

这样就不需要将jQuery作为依赖项添加到应用程序中。

Answer 2

实际错误不是来自transclusion，而是来自template属性。从您提供的代码片段中，您只需进行一些小的更改即可使其工作（您将模板属性分配给函数而不调用它）

这

template: getTemplate 

要

template: getTemplate()

虽然这可以解决您的问题，但我建议您将模板移动到单独的html文件中，而不是将其保持内联。调试和扩展内联HTML非常困难。