angular / angular.js

AngularJS - HTML enhanced for web apps!
https://angularjs.org
MIT License
58.84k stars 27.51k forks source link

DOM Manipulation in transclude function leads to exception in compositeLinkFn #7344

Open agent0 opened 10 years ago

agent0 commented 10 years ago

Hi, I am experiencing a strange problem in my custom directive that support multiple transclusion into a single template. Here is the code of the directive

directives.directive('ngMultiTransclude', function(){
  return {

    link: function($scope, $element, $attrs, controller, transclude){
      var selector = '[name=' + $attrs.ngMultiTransclude + ']';

      transclude($scope, function(clone){
        var $part = clone.find(selector).addBack(selector);        
          $element.html('');        
          $element.append($part);
      });
    }
  };
});

The directive works just fine as long as the transcluded element is a top-level child of the transcluding parent. If, however, the transcluded content is not a top-level child, the Exception thrown is this:

Error: node is undefined
compositeLinkFn@http://localhost:8003/lib/angular/angular.js:5723
compositeLinkFn@http://localhost:8003/lib/angular/angular.js:5723
compositeLinkFn@http://localhost:8003/lib/angular/angular.js:5723
compositeLinkFn@http://localhost:8003/lib/angular/angular.js:5723
publicLinkFn@http://localhost:8003/lib/angular/angular.js:5625

So the problem only occurs if the DOM is changed in a way that removes to original anchor and tries to insert a former child node. Is there any way to achieve what I want (e.g. wrap the children into some angular-specific code).

Regards,

Jürgen

agent0 commented 10 years ago

To illustrate the error, I have set up a Plunker: http://plnkr.co/edit/RZDqHElcymcelKH2F9Qr The difference between the ok page and the not-ok page is that the transcluded element is not the direct child of the transcluding element. Is this a bug in angular or (more likely) in my code?