使用 jQuery 步包含在嵌套元素中

Question

我正在尝试将 jQuery Steps（向导生成器）集成到 Angular.js 应用程序中，其中包含来自 angular-[=46= 的嵌套 Google 地图元素]-地图 (https://github.com/angular-ui/angular-google-maps).

但是，我收到此错误： https://docs.angularjs.org/error/ngTransclude/orphan - "Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found."

看起来我在 Angular.js link 阶段一直在使用 $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'
    };

});

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

此处，'outer' 元素代表 jQuery Steps 'wrapped' 自定义指令，'inner' 元素是带有嵌入的 Google Maps 自定义指令和一个模板。

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

提前致谢... 奈杰尔

Answer 1

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

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

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

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

使用 jQuery 步包含在嵌套元素中

Transclusion within nested element with jQuery Steps

angularjs

jquery-plugins

angularjs-directive

jquery-steps