与jQuery步骤嵌套元素内Transclusion(Transclusion within nes

我试图jQuery的步骤（向导生成器）在Angular.js应用与角谷歌，地图嵌套的谷歌地图元素（集成https://github.com/angular-ui/angular-google-maps ）。

不过，我得到这个错误： https://docs.angularjs.org/error/ngTransclude/orphan - ！“非法使用模板ngTransclude指令无父指令的要求找到了transclusion”

它看起来像我已经使用$编译期间Angular.js链接阶段，但<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

这里，“外”元素代表了jQuery步骤“包裹”自定义指令和“内部”元素是一个transclude和模板的谷歌地图自定义指令。

我一直在抓我的头就这一个今天大多数的，所以我希望它为别人指出我一个简单的解决方案！

在此先感谢...奈杰尔

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

文章来源: Transclusion within nested element with jQuery Steps