使用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链接阶段,但< DIV NG-transclude>< / DIV>
是不是被取代了嵌套元素。
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 inner
is 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屋!