使用jQuery步嵌套元素中Transclusion [英] Transclusion within nested element with jQuery Steps

问题描述

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

I'm attempting to integrate jQuery Steps (Wizard generator) in an Angular.js application with a nested Google Maps element from angular-google-maps (https://github.com/angular-ui/angular-google-maps).

不过，我得到这个错误：
https://docs.angularjs.org/error/ngTransclude/orphan - 非法使用在模板ngTransclude指令！需要找到transclusion没有父母的指令。

However, I get this error: 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链接阶段，但＆LT; D​​IV NG-transclude＆GT;＆LT; / DIV＆GT; 是不是被取代了嵌套元素。

It looks like I have been using $compile during the Angular.js link phase, but the <div ng-transclude></div> is not being replaced in the nested element.

HTML

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

使用Javascript：

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=$p$pview

下面，再$ P $的'外'元素psents jQuery的步骤包裹自定义指令和'内部'元素是一个transclude和模板的谷歌地图自定义的指令。

Here, the 'outer' element represents the jQuery Steps 'wrapped' custom directive and the 'inner' element is the Google Maps custom directive with a transclude and a template.

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

I've been scratching my head on this one most of today so I hope its an easy solution for someone else to point out for me!

在此先感谢...
奈杰尔

Thanks in advance... Nigel

推荐答案

的问题是，内是越来越编译两次。你可以使用编译函数代替链接解决问题之一：

The problem is that the inneris getting compiled twice. You might solve the problem using the compile function instead of the link one:

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

您也可以发表意见 $编译（步骤）（范围）;在链接功能链接至于你没有任何其他code到在外标记中进行编译。

You could also comment the $compile(steps)(scope); link in the link function as far as you don't have any other code to be compiled inside the outer tag.

更新plunkr ： http://plnkr.co /编辑/ SKqpgT38vGBA92YyRe66？p = preVIEW

这篇关于使用jQuery步嵌套元素中Transclusion的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！