Question

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

但是，我收到此错误： https://docs.angularjs.org/error/ngTransclude/orphan - ＆＃34;在模板中非法使用ngTransclude指令！没有需要进行转换的父指令。＆＃34;

看起来我在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

在这里，＆＃39;外部＆＃39; element表示jQuery Steps＆＃39; wrapped＆＃39;自定义指令和内部＆＃39; element是带有转码和模板的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

使用jQuery Steps在嵌套元素中进行转换

1 个答案: