Angularjs 使用jQuery步骤在嵌套元素中转换

我正试图将jQuery步骤（向导生成器）与Angular.js应用程序中的Angular Google Maps（）中的嵌套Google Maps元素集成在一起

但是，我得到了这个错误： -“在模板中非法使用ngTransclude指令！未找到需要转换的父指令。”

看起来我在Angular.js链接阶段使用了$compile，但是嵌套元素中没有替换

HTML:

XZY987
ABC123

Javascript:

var ngApp = angular.module('tr', []);

ngApp.directive('outer', ['$compile', function($compile) {
    return {
        restrict: 'A',
        link: function (scope, ele) {
            ele.wrapInner('<div class="steps-wrapper">');
            var steps = ele.children('.steps-wrapper').steps();
            $compile(steps)(scope);
        }
    };
}]);
ngApp.directive('inner', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: 'WWW <div ng-transclude></div> UUU'
    };

var ngApp=angular.module（'tr'，[]）；
指令（'outer'，['$compile'，函数（$compile）{
返回{
限制：“A”，
链接：功能（范围、要素）{
元素wrapInner（“”）；
var steps=ele.children（'.steps包装器'）.steps（）；
$compile（步骤）（范围）；
}
};
}]);
ngApp.directive（'inner'，function（）{
返回{
限制：'E'，
是的，
模板：“WWW-UUU”
};

}))

Plnkr：

在这里，“outer”元素表示jQuery步骤“wrapped”自定义指令，“inner”元素表示带有transclude和模板的GoogleMaps自定义指令

今天大部分时间我都在为这个问题挠头，所以我希望这是一个简单的解决方案，让其他人为我指出

先谢谢你。。。

---

奈杰尔

问题是，

内部

被编译了两次。您可以使用

compile

函数而不是

链接来解决此问题：

    compile: function(ele){
        ele.wrapInner('<div class="steps-wrapper"></div>');
        var steps = ele.children('.steps-wrapper').steps();
    }

编译：函数（ele）{
元素wrapInner（“”）；
var steps=ele.children（'.steps包装器'）.steps（）；
}

您还可以注释

$compile（步骤）（范围）outer

标记中没有任何其他要编译的代码，就可以使用link函数中的code>link

---

更新的plunkr：

谢谢@knut。。。现在，这对我来说更有意义，因为jQuery步骤执行DOM转换，所以最好在附加作用域之前的编译（）阶段执行此操作。此外，link（）在默认情况下实际上是一个“post-link”函数。

    compile: function(ele){
        ele.wrapInner('<div class="steps-wrapper"></div>');
        var steps = ele.children('.steps-wrapper').steps();
    }