diff --git a/modules/angular2/src/render/dom/shadow_dom/content_tag.ts b/modules/angular2/src/render/dom/shadow_dom/content_tag.ts index bf6f8daca8..df2f616d54 100644 --- a/modules/angular2/src/render/dom/shadow_dom/content_tag.ts +++ b/modules/angular2/src/render/dom/shadow_dom/content_tag.ts @@ -1,6 +1,6 @@ import * as ldModule from './light_dom'; import {DOM} from 'angular2/src/dom/dom_adapter'; -import {isPresent, isBlank} from 'angular2/src/facade/lang'; +import {isPresent} from 'angular2/src/facade/lang'; import {List, ListWrapper} from 'angular2/src/facade/collection'; class ContentStrategy { @@ -20,6 +20,7 @@ class RenderedContent extends ContentStrategy { constructor(contentEl) { super(); this.beginScript = contentEl; + this.endScript = DOM.nextSibling(this.beginScript); this.nodes = []; } @@ -27,23 +28,15 @@ class RenderedContent extends ContentStrategy { // Previous content is removed. insert(nodes: List*node*/ any>) { this.nodes = nodes; - - if (isBlank(this.endScript)) { - // On first invocation, we need to create the end marker - this.endScript = DOM.createScriptTag('type', 'ng/contentEnd'); - DOM.insertAfter(this.beginScript, this.endScript); - } else { - // On subsequent invocations, only remove all the nodes between the start end end markers - this._removeNodes(); - } - DOM.insertAllBefore(this.endScript, nodes); + this._removeNodesUntil(ListWrapper.isEmpty(nodes) ? this.endScript : nodes[0]); } - _removeNodes() { - for (var node = DOM.nextSibling(this.beginScript); node !== this.endScript; - node = DOM.nextSibling(this.beginScript)) { - DOM.remove(node); + _removeNodesUntil(node) { + var p = DOM.parentElement(this.beginScript); + for (var next = DOM.nextSibling(this.beginScript); next !== node; + next = DOM.nextSibling(this.beginScript)) { + DOM.removeChild(p, next); } } } diff --git a/modules/angular2/src/render/dom/shadow_dom/shadow_dom_compile_step.ts b/modules/angular2/src/render/dom/shadow_dom/shadow_dom_compile_step.ts index 0670befa2e..094337d155 100644 --- a/modules/angular2/src/render/dom/shadow_dom/shadow_dom_compile_step.ts +++ b/modules/angular2/src/render/dom/shadow_dom/shadow_dom_compile_step.ts @@ -47,15 +47,13 @@ export class ShadowDomCompileStep implements CompileStep { var selector = attrs.get('select'); selector = isPresent(selector) ? selector : ''; - // The content tag should be replaced by a pair of marker tags (start & end). - // The end marker creation is delayed to keep the number of elements constant. - // Creating the end marker here would invalidate the parent's textNodeIndices for the subsequent - // text nodes var contentStart = DOM.createScriptTag('type', 'ng/contentStart'); if (assertionsEnabled()) { DOM.setAttribute(contentStart, 'select', selector); } + var contentEnd = DOM.createScriptTag('type', 'ng/contentEnd'); DOM.insertBefore(current.element, contentStart); + DOM.insertBefore(current.element, contentEnd); DOM.remove(current.element); current.element = contentStart; diff --git a/modules/angular2/test/render/dom/shadow_dom/content_tag_spec.ts b/modules/angular2/test/render/dom/shadow_dom/content_tag_spec.ts index d96eca0c83..a8b332f275 100644 --- a/modules/angular2/test/render/dom/shadow_dom/content_tag_spec.ts +++ b/modules/angular2/test/render/dom/shadow_dom/content_tag_spec.ts @@ -13,6 +13,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter'; import {Content} from 'angular2/src/render/dom/shadow_dom/content_tag'; var _scriptStart = ``; +var _scriptEnd = ``; export function main() { describe('Content', function() { @@ -20,32 +21,35 @@ export function main() { var content; beforeEach(() => { - parent = el(`