allow the widget to change structure of the DOM and have the compiler follow the replaced element.

Author: mhevery

src/Compiler.js

@@ -77,7 +77,7 @@ function Compiler(textMarkup, attrMarkup, directives, widgets){
 Compiler.prototype = {
   compile: function(rawElement) {
     rawElement = jqLite(rawElement);
-    var template = this.templatize(rawElement) || new Template();
+    var template = this.templatize(rawElement, 0, 0) || new Template();
     return function(element, parentScope){
       element = jqLite(element);
       var scope = parentScope && parentScope.$eval ?
@@ -95,7 +95,7 @@ Compiler.prototype = {
     };
   },
 
-  templatize: function(element, priority){
+  templatize: function(element, elementIndex, priority){
     var self = this,
         widget,
         directiveFns = self.directives,
@@ -130,7 +130,11 @@ Compiler.prototype = {
     if (widget) {
       descend = false;
       directives = false;
+      var parent = element.parent();
       template.addInit(widget.call(selfApi, element));
+      if (parent) {
+        element = jqLite(parent[0].childNodes[elementIndex]);
+      }
     }
     if (descend){
       // process markup for text nodes only
@@ -156,7 +160,7 @@ Compiler.prototype = {
     // Process non text child nodes
     if (descend) {
       eachNode(element, function(child, i){
-        template.addChild(i, self.templatize(child, priority));
+        template.addChild(i, self.templatize(child, i, priority));
       });
     }
     return template.empty() ? null : template;

test/CompilerSpec.js

@@ -108,7 +108,7 @@ describe('compiler', function(){
 
   it('should replace widgets', function(){
     widgets['NG:BUTTON'] = function(element) {
-      element.replaceWith('<div>button</div>', element);
+      element.replaceWith('<div>button</div>');
       return function(element) {
         log += 'init';
       };
@@ -118,4 +118,20 @@ describe('compiler', function(){
     expect(log).toEqual('init');
   });
 
+  it('should use the replaced element after calling widget', function(){
+    widgets['H1'] = function(element) {
+      var span = angular.element('<span>{{1+2}}</span>');
+      element.replaceWith(span);
+      this.descend(true);
+      this.directives(true);
+      return noop;
+    };
+    textMarkup.push(function(text, textNode, parent){
+      if (text == '{{1+2}}')
+        textNode.text('3');
+    });
+    var scope = compile('<div><h1>ignore me</h1></div>');
+    expect(scope.$element.text()).toEqual('3');
+  });
+
 });