Transclusion within nested element with jQuery Steps

问题

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).

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."

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:

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

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

回答1:

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();
    }

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.

Updated plunkr: http://plnkr.co/edit/SKqpgT38vGBA92YyRe66?p=preview

来源：https://stackoverflow.com/questions/28957377/transclusion-within-nested-element-with-jquery-steps

标签

angularjs

jquery-plugins

angularjs-directive

jquery-steps