javascript - 在模板中非法使用 ngTransclude 指令!手动进行嵌入时

Question

我非常询问是否可以在指令模板中两次嵌入指令的内部内容(克隆它并将其插入到模板中的两个位置)。

一位非常乐于助人的人帮助我将这个插件组合在一起。

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

一开始似乎有效。当我使用任何使用嵌入本身的子元素时，问题就出现了。我得到的错误是...

[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

问题代码

该指令试图在一次调用嵌入函数时执行双重嵌入。

//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 作为依赖项添加到应用程序中。