1

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

但是，我收到此错误： 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 自定义指令。

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

在此先感谢...奈杰尔

4

1 回答 1

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

于 2015-03-10T09:52:56.190 回答