fix(components): the content tag duplicates elements

Closes dart-archive#1422
vsavkin · Sep 9, 2014 · a8337c6 · a8337c6
1 parent c83d11c
commit a8337c6
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/lib/core_dom/light_dom.dart b/lib/core_dom/light_dom.dart
@@ -24,7 +24,9 @@ class LightDom implements SourceLightDom, DestinationLightDom {
 
   void pullNodes() {
     _lightDomRootNodes.addAll(_componentElement.nodes);
+  }
 
+  void clearComponentElement() {
     // This is needed because _lightDomRootNodes can contains viewports,
     // which cannot be detached.
     final fakeRoot = new dom.DivElement();

diff --git a/lib/core_dom/transcluding_component_factory.dart b/lib/core_dom/transcluding_component_factory.dart
@@ -53,15 +53,14 @@ class BoundTranscludingComponentFactory implements BoundComponentFactory {
       var childInjectorCompleter; // Used if the ViewFuture is available before the childInjector.
 
       var component = _component;
-      var lightDom = new LightDom(element, scope);
+      var lightDom = new LightDom(element, scope)..pullNodes();
 
       // Append the component's template as children
       var elementFuture;
 
       if (_viewFuture != null) {
         elementFuture = _viewFuture.then((ViewFactory viewFactory) {
-          lightDom.pullNodes();
-
+          lightDom.clearComponentElement();
           if (childInjector != null) {
             lightDom.shadowDomView = viewFactory.call(childInjector.scope, childInjector);
             return element;
@@ -74,7 +73,7 @@ class BoundTranscludingComponentFactory implements BoundComponentFactory {
           }
         });
       } else {
-        elementFuture = new async.Future.microtask(() => lightDom.pullNodes());
+        elementFuture = new async.Future.microtask(lightDom.clearComponentElement);
       }
       TemplateLoader templateLoader = new TemplateLoader(elementFuture);
 

diff --git a/test/core_dom/compiler_spec.dart b/test/core_dom/compiler_spec.dart
@@ -303,7 +303,8 @@ void main() {
           ..bind(OneTimeDecorator)
           ..bind(OnceInside)
           ..bind(OuterShadowless)
-          ..bind(InnerShadowy);
+          ..bind(InnerShadowy)
+          ..bind(TemplateUrlComponent);
       });
 
       describe("distribution", () {
@@ -467,8 +468,35 @@ void main() {
 
           expect(element).toHaveText('OUTER(INNER(INNERINNER(A,BC)))');
         }));
-      });
 
+        it("should not duplicate elements when using components with templateUrl", async((MockHttpBackend backend) {
+          backend.expectGET("${TEST_SERVER_BASE_PREFIX}test/core_dom/template.html").respond(200, "<content></content>");
+
+          _.rootScope.context["show"] = true;
+          var element = _.compile(r'<div>'
+            '<template-url-component>'
+              '<div ng-if="show">A</div>'
+              '<div>B</div>'
+            '<template-url-component>'
+          '</div>');
+          document.body.append(element);
+
+          microLeap();
+          _.rootScope.apply();
+
+          backend.flush();
+
+          _.rootScope.context["show"] = false;
+          microLeap();
+          _.rootScope.apply();
+
+          _.rootScope.context["show"] = true;
+          microLeap();
+          _.rootScope.apply();
+
+          expect(element).toHaveText('AB');
+        }));
+      });
 
       it('should store ElementProbe with Elements', async(() {
         if (compilerType == 'no-elementProbe') return;
@@ -1597,6 +1625,13 @@ class InnerInnerComponent {
   InnerInnerComponent() {}
 }
 
+@Component(
+    selector: 'template-url-component',
+    templateUrl: 'template.html'
+)
+class TemplateUrlComponent {
+}
+
 _shadowScope(element){
   if (element.shadowRoot != null) {
     return ngProbe(element.shadowRoot).scope;