fix(list): copy ng-show, ng-hide and ng-if to secondary item parent.

* Once a developer specifies a secondary item, which is not a button, but contains a `ng-click` on it, we automatically create a button, which holds the actual secondary item.
  We copy all necessary attributes from the secondary item to the new generated button.

* Developers may have specified a ng-show, ng-hide, ng-if on the secondary item. But those attributes will stay on the secondary item, which is not correct.
  Those attributes should be copied to the new generated button, because we want to hide the complete *secondary item*.

Fixes #8794.

Closes #8796

Author: devversion

src/components/list/list.js

@@ -349,12 +349,21 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
       }
 
       function wrapSecondaryItem(secondaryItem, container) {
+        // If the current secondary item is not a button, but contains a ng-click attribute,
+        // the secondary item will be automatically wrapped inside of a button.
         if (secondaryItem && !isButton(secondaryItem) && secondaryItem.hasAttribute('ng-click')) {
+
           $mdAria.expect(secondaryItem, 'aria-label');
           var buttonWrapper = angular.element('<md-button class="md-secondary md-icon-button">');
-          copyAttributes(secondaryItem, buttonWrapper[0]);
+
+          // Copy the attributes from the secondary item to the generated button.
+          // We also support some additional attributes from the secondary item,
+          // because some developers may use a ngIf, ngHide, ngShow on their item.
+          copyAttributes(secondaryItem, buttonWrapper[0], ['ng-if', 'ng-hide', 'ng-show']);
+
           secondaryItem.setAttribute('tabindex', '-1');
           buttonWrapper.append(secondaryItem);
+
           secondaryItem = buttonWrapper[0];
         }
 
@@ -368,16 +377,28 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
         container.append(secondaryItem);
       }
 
-      function copyAttributes(item, wrapper) {
+      /**
+       * Copies attributes from a source element to the destination element
+       * By default the function will copy the most necessary attributes, supported
+       * by the button executor for clickable list items.
+       * @param source Element with the specified attributes
+       * @param destination Element which will retrieve the attributes
+       * @param extraAttrs Additional attributes, which will be copied over.
+       */
+      function copyAttributes(source, destination, extraAttrs) {
         var copiedAttrs = $mdUtil.prefixer([
           'ng-if', 'ng-click', 'ng-dblclick', 'aria-label', 'ng-disabled', 'ui-sref',
           'href', 'ng-href', 'target', 'ng-attr-ui-sref', 'ui-sref-opts'
         ]);
 
+        if (extraAttrs) {
+          copiedAttrs = copiedAttrs.concat($mdUtil.prefixer(extraAttrs));
+        }
+
         angular.forEach(copiedAttrs, function(attr) {
-          if (item.hasAttribute(attr)) {
-            wrapper.setAttribute(attr, item.getAttribute(attr));
-            item.removeAttribute(attr);
+          if (source.hasAttribute(attr)) {
+            destination.setAttribute(attr, source.getAttribute(attr));
+            source.removeAttribute(attr);
           }
         });
       }

src/components/list/list.spec.js

@@ -289,6 +289,37 @@ describe('mdListItem directive', function() {
     expect(secondaryContainer.children()[0].nodeName).toBe('MD-BUTTON');
   });
 
+  it('should copy ng-show to the generated button parent of a clickable secondary item', function() {
+    var listItem = setup(
+      '<md-list-item ng-click="sayHello()">' +
+        '<p>Hello World</p>' +
+        '<md-icon class="md-secondary" ng-show="isShown" ng-click="goWild()"></md-icon>' +
+      '</md-list-item>');
+
+    // First child is our button wrap
+    var firstChild = listItem.children().eq(0);
+    expect(firstChild[0].nodeName).toBe('DIV');
+
+    expect(listItem).toHaveClass('_md-button-wrap');
+
+    // It should contain three elements, the button overlay, inner content
+    // and the secondary container.
+    expect(firstChild.children().length).toBe(3);
+
+    var secondaryContainer = firstChild.children().eq(2);
+    expect(secondaryContainer).toHaveClass('_md-secondary-container');
+
+    // The secondary container should contain the md-icon,
+    // which has been transformed to an icon button.
+    var iconButton = secondaryContainer.children()[0];
+
+    expect(iconButton.nodeName).toBe('MD-BUTTON');
+    expect(iconButton.hasAttribute('ng-show')).toBe(true);
+
+    // The actual `md-icon` element, should not have the ng-show attribute anymore.
+    expect(iconButton.firstElementChild.hasAttribute('ng-show')).toBe(false);
+  });
+
   it('moves multiple md-secondary items outside of the button', function() {
     var listItem = setup(
       '<md-list-item ng-click="sayHello()">' +