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.

lib/core_dom/content_tag.dart

@@ -51,6 +51,7 @@ class _RenderedTranscludingContent implements _ContentStrategy {
   void insert(Iterable<dom.Node> nodes){
     final p = _endScript.parent;
     if (p != null && ! _equalToCurrNodes(nodes)) {
+      _removeNodesBetweenScriptTags();
       _currNodes = nodes.toList();
       p.insertAllBefore(nodes, _endScript);
     }
@@ -78,7 +79,7 @@ class _RenderedTranscludingContent implements _ContentStrategy {
   void _removeNodesBetweenScriptTags() {
     final p = _beginScript.parent;
     for (var next = _beginScript.nextNode;
-        next.nodeType != dom.Node.ELEMENT_NODE || next.attributes["ng/content"] != null;
+        next.nodeType != dom.Node.ELEMENT_NODE || next.attributes["type"] != "ng/content";
         next = _beginScript.nextNode) {
       p.nodes.remove(next);
     }

test/core_dom/compiler_spec.dart

@@ -303,6 +303,7 @@ void main() {
           ..bind(SimpleAttachComponent)
           ..bind(SimpleComponent)
           ..bind(MultipleContentTagsComponent)
+          ..bind(SelectableContentComponent)
           ..bind(ConditionalContentComponent)
           ..bind(ExprAttrComponent)
           ..bind(LogElementComponent)
@@ -478,6 +479,32 @@ void main() {
           expect(element).toHaveText('OUTER(INNER(ABC))');
         }));
 
+        it("should remove elements that no longer match the selector", async((){
+          var element = _.compile(r'<div>'
+            '<selectable-content-tag>'
+              '<div ng-class="{\'selected\':isSelected}">A</div>'
+              '<div class="selected">B</div>'
+              '<div>C</div>'
+            '</selectable-content-tag>'
+          '</div>');
+          document.body.append(element);
+
+          microLeap();
+          _.rootScope.apply();
+
+          _.rootScope.context["isSelected"] = true;
+          microLeap();
+          _.rootScope.apply();
+
+          expect(element).toHaveText('(AB)');
+
+          _.rootScope.context["isSelected"] = false;
+          microLeap();
+          _.rootScope.apply();
+
+          expect(element).toHaveText('(B)');
+        }));
+
         it("should support nesting with content being direct child of a nested component", async((){
           // platform.js does not emulate this behavior, so the test fails on firefox.
           // Remove the if when this is fixed.
@@ -1319,6 +1346,13 @@ class SimpleComponent {
   var name = 'INNER';
 }
 
+@Component(
+    selector: 'selectable-content-tag',
+    template: r'(<content select=".selected"></content>)')
+class SelectableContentComponent {
+  SelectableContentComponent();
+}
+
 @Component(
     selector: 'multiple-content-tags',
     template: r'(<content select=".left"></content>, <content></content>)')