fix(shadowdom): allow conditional content tags.

Distribution is triggered on the host element injector after each new
view creation.

modules/angular2/src/core/compiler/element_injector.js

@@ -5,7 +5,7 @@ import {Injector, Key, Dependency, bind, Binding, NoProviderError, ProviderError
 import {Parent, Ancestor} from 'angular2/src/core/annotations/visibility';
 import {EventEmitter, PropertySetter} from 'angular2/src/core/annotations/di';
 import * as viewModule from 'angular2/src/core/compiler/view';
-import {LightDom, SourceLightDom, DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
+import {LightDom, DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
 import {ViewContainer} from 'angular2/src/core/compiler/view_container';
 import {NgElement} from 'angular2/src/core/dom/element';
 import {Directive, onChange, onDestroy} from 'angular2/src/core/annotations/annotations'
@@ -25,7 +25,7 @@ class StaticKeys {
   ngElementId:number;
   viewContainerId:number;
   destinationLightDomId:number;
-  sourceLightDomId:number;
+  lightDomId:number;
   bindingPropagationConfigId:number;
 
   constructor() {
@@ -34,7 +34,7 @@ class StaticKeys {
     this.ngElementId = Key.get(NgElement).id;
     this.viewContainerId = Key.get(ViewContainer).id;
     this.destinationLightDomId = Key.get(DestinationLightDom).id;
-    this.sourceLightDomId = Key.get(SourceLightDom).id;
+    this.lightDomId = Key.get(LightDom).id;
     this.bindingPropagationConfigId = Key.get(BindingPropagationConfig).id;
   }
 
@@ -581,8 +581,8 @@ export class ElementInjector extends TreeNode {
       var p:ElementInjector = this.directParent();
       return isPresent(p) ? p._preBuiltObjects.lightDom : null;
     }
-    if (keyId === staticKeys.sourceLightDomId)   {
-      return this._host._preBuiltObjects.lightDom;
+    if (keyId === staticKeys.lightDomId)   {
+      return this._preBuiltObjects.lightDom;
     }
 
     //TODO add other objects as needed

modules/angular2/src/core/compiler/shadow_dom_emulation/light_dom.js

@@ -7,7 +7,6 @@ import {ElementInjector} from '../element_injector';
 import {ViewContainer} from '../view_container';
 import {Content} from './content_tag';
 
-export class SourceLightDom {}
 export class DestinationLightDom {}
 
 
@@ -21,7 +20,7 @@ class _Root {
   }
 }
 
-// TODO: LightDom should implement SourceLightDom and DestinationLightDom
+// TODO: LightDom should implement DestinationLightDom
 // once interfaces are supported
 export class LightDom {
   // The light DOM of the element is enclosed inside the lightDomView

modules/angular2/src/core/compiler/view_container.js

@@ -6,17 +6,19 @@ import {Injector} from 'angular2/di';
 import * as eiModule from 'angular2/src/core/compiler/element_injector';
 import {isPresent, isBlank} from 'angular2/src/facade/lang';
 import {EventManager} from 'angular2/src/core/events/event_manager';
+import * as ldModule from './shadow_dom_emulation/light_dom';
 
 export class ViewContainer {
   parentView: viewModule.View;
   templateElement;
   defaultProtoView: viewModule.ProtoView;
   _views: List<viewModule.View>;
-  _lightDom: any;
+  _lightDom: ldModule.LightDom;
   _eventManager: EventManager;
   elementInjector: eiModule.ElementInjector;
   appInjector: Injector;
   hostElementInjector: eiModule.ElementInjector;
+  hostLightDom: ldModule.LightDom;
 
   constructor(parentView: viewModule.View,
               templateElement,
@@ -34,17 +36,20 @@ export class ViewContainer {
     this._views = [];
     this.appInjector = null;
     this.hostElementInjector = null;
+    this.hostLightDom = null;
     this._eventManager = eventManager;
   }
 
   hydrate(appInjector: Injector, hostElementInjector: eiModule.ElementInjector) {
     this.appInjector = appInjector;
     this.hostElementInjector = hostElementInjector;
+    this.hostLightDom = isPresent(hostElementInjector) ? hostElementInjector.get(ldModule.LightDom) : null;
   }
 
   dehydrate() {
     this.appInjector = null;
     this.hostElementInjector = null;
+    this.hostLightDom = null;
     this.clear();
   }
 
@@ -81,6 +86,11 @@ export class ViewContainer {
     // insertion must come before hydration so that element injector trees are attached.
     this.insert(newView, atIndex);
     newView.hydrate(this.appInjector, this.hostElementInjector, this.parentView.context);
+
+    // new content tags might have appeared, we need to redistrubute.
+    if (isPresent(this.hostLightDom)) {
+      this.hostLightDom.redistribute();
+    }
     return newView;
   }
 
@@ -94,6 +104,7 @@ export class ViewContainer {
     }
     this.parentView.changeDetector.addChild(view.changeDetector);
     this._linkElementInjectors(view);
+
     return view;
   }
 
@@ -119,6 +130,10 @@ export class ViewContainer {
     } else {
       this._lightDom.redistribute();
     }
+    // content tags might have disappeared we need to do redistribution.
+    if (isPresent(this.hostLightDom)) {
+      this.hostLightDom.redistribute();
+    }
     detachedView.changeDetector.remove();
     this._unlinkElementInjectors(detachedView);
     return detachedView;