Skip to content
This repository was archived by the owner on Feb 22, 2018. It is now read-only.

Commit 011d65f

Browse files
goderbauerrkirov
authored andcommitted
fix(content_tag): removes elements no longer selected by the content tag from DOM
In transcluding mode, elements that were previously matched by a content tag's select attribute were not removed from the DOM when the elements were no longer selected. This patch fixes the issue.
1 parent 43e00e5 commit 011d65f

File tree

2 files changed

+36
-1
lines changed

2 files changed

+36
-1
lines changed

lib/core_dom/content_tag.dart

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ class _RenderedTranscludingContent implements _ContentStrategy {
5151
void insert(Iterable<dom.Node> nodes){
5252
final p = _endScript.parent;
5353
if (p != null && ! _equalToCurrNodes(nodes)) {
54+
_removeNodesBetweenScriptTags();
5455
_currNodes = nodes.toList();
5556
p.insertAllBefore(nodes, _endScript);
5657
}
@@ -78,7 +79,7 @@ class _RenderedTranscludingContent implements _ContentStrategy {
7879
void _removeNodesBetweenScriptTags() {
7980
final p = _beginScript.parent;
8081
for (var next = _beginScript.nextNode;
81-
next.nodeType != dom.Node.ELEMENT_NODE || next.attributes["ng/content"] != null;
82+
next.nodeType != dom.Node.ELEMENT_NODE || next.attributes["type"] != "ng/content";
8283
next = _beginScript.nextNode) {
8384
p.nodes.remove(next);
8485
}

test/core_dom/compiler_spec.dart

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,7 @@ void main() {
303303
..bind(SimpleAttachComponent)
304304
..bind(SimpleComponent)
305305
..bind(MultipleContentTagsComponent)
306+
..bind(SelectableContentComponent)
306307
..bind(ConditionalContentComponent)
307308
..bind(ExprAttrComponent)
308309
..bind(LogElementComponent)
@@ -478,6 +479,32 @@ void main() {
478479
expect(element).toHaveText('OUTER(INNER(ABC))');
479480
}));
480481

482+
it("should remove elements that no longer match the selector", async((){
483+
var element = _.compile(r'<div>'
484+
'<selectable-content-tag>'
485+
'<div ng-class="{\'selected\':isSelected}">A</div>'
486+
'<div class="selected">B</div>'
487+
'<div>C</div>'
488+
'</selectable-content-tag>'
489+
'</div>');
490+
document.body.append(element);
491+
492+
microLeap();
493+
_.rootScope.apply();
494+
495+
_.rootScope.context["isSelected"] = true;
496+
microLeap();
497+
_.rootScope.apply();
498+
499+
expect(element).toHaveText('(AB)');
500+
501+
_.rootScope.context["isSelected"] = false;
502+
microLeap();
503+
_.rootScope.apply();
504+
505+
expect(element).toHaveText('(B)');
506+
}));
507+
481508
it("should support nesting with content being direct child of a nested component", async((){
482509
// platform.js does not emulate this behavior, so the test fails on firefox.
483510
// Remove the if when this is fixed.
@@ -1319,6 +1346,13 @@ class SimpleComponent {
13191346
var name = 'INNER';
13201347
}
13211348

1349+
@Component(
1350+
selector: 'selectable-content-tag',
1351+
template: r'(<content select=".selected"></content>)')
1352+
class SelectableContentComponent {
1353+
SelectableContentComponent();
1354+
}
1355+
13221356
@Component(
13231357
selector: 'multiple-content-tags',
13241358
template: r'(<content select=".left"></content>, <content></content>)')

0 commit comments

Comments
 (0)