使用 jQuery 步骤在嵌套元素中进行嵌入

Question

我正在尝试将 jQuery Steps（向导生成器）与来自 angular-google-maps (https://github.com/angular-ui/angular-google-maps) 的嵌套 Google Maps 元素集成到 Angular.js 应用程序中。

但是，我收到此错误： https://docs.angularjs.org/error/ngTransclude/orphan - “在模板中非法使用 ngTransclude 指令！没有找到需要嵌入的父指令。”

看起来我在 Angular.js 链接阶段一直在使用 $compile，但 <div ng-transclude></div> 没有在嵌套元素中被替换。

HTML：

<div ng-app='tr'>
  <div outer=1>
      XZY987
      <inner>ABC123</inner>
  </div>
</div>    

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'
    };

});

Plnkr： http://plnkr.co/edit/GYE57Dz4W4sLHlvSt6VQ?p=preview

这里，'outer' 元素表示 jQuery Steps 'wrapped' 自定义指令，'inner' 元素是带有 transclude 和模板的 Google Maps 自定义指令。

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

提前谢谢... 奈杰尔

Answer 1

问题是inner被编译了两次。您可以使用compile 函数而不是link 函数来解决问题：

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

您也可以在链接函数中注释$compile(steps)(scope); 链接，只要您在outer 标记内没有要编译的任何其他代码。

更新 plunkr：http://plnkr.co/edit/SKqpgT38vGBA92YyRe66?p=preview