fix(autocomplete): fix not found template detection when element is hidden

When the element is hidden at compilation time through a ng-if directive for example.
The stored variable as currently used will be trashed, so it will be undefined.

So there a possibilities to store that state, using a variable in the directive (ex. hashmaps with ids) or storing it as an attribute / class.

Fixes #7035 Fixes #7142

  Closes #7042

Author: devversion

src/components/autocomplete/autocomplete.spec.js

@@ -488,6 +488,33 @@ describe('<md-autocomplete>', function() {
       element.remove();
     }));
 
+    it('properly sets hasNotFound when element is hidden through ng-if', inject(function() {
+      var scope = createScope();
+      var template1 =
+        '<div>' +
+          '<md-autocomplete ' +
+              'md-selected-item="selectedItem" ' +
+              'md-search-text="searchText" ' +
+              'md-items="item in match(searchText)" ' +
+              'md-item-text="item.display" ' +
+              'placeholder="placeholder" ' +
+              'ng-if="showAutocomplete">' +
+            '<md-item-template>{{item.display}}</md-item-template>' +
+            '<md-not-found>Sorry, not found...</md-not-found>' +
+          '</md-autocomplete>' +
+        '</div>';
+      var element = compile(template1, scope);
+      var ctrl = element.children().controller('mdAutocomplete');
+
+      expect(ctrl).toBeUndefined();
+
+      scope.$apply('showAutocomplete = true');
+
+      ctrl = element.children().controller('mdAutocomplete');
+
+      expect(ctrl.hasNotFound).toBe(true);
+    }));
+
     it('properly sets hasNotFound with multiple autocompletes', inject(function($timeout, $material) {
       var scope = createScope();
       var template1 =

src/components/autocomplete/js/autocompleteDirective.js

@@ -146,17 +146,20 @@ function MdAutocomplete () {
       inputId:        '@?mdInputId'
     },
     link: function(scope, element, attrs, controller) {
-      controller.hasNotFound = element.hasNotFoundTemplate;
-      delete element.hasNotFoundTemplate;
+      // Retrieve the state of using a md-not-found template by using our attribute, which will
+      // be added to the element in the template function.
+      controller.hasNotFound = !!element.attr('md-has-not-found');
     },
     template:     function (element, attr) {
       var noItemsTemplate = getNoItemsTemplate(),
           itemTemplate    = getItemTemplate(),
           leftover        = element.html(),
           tabindex        = attr.tabindex;
 
-      // Set our variable for the link function above which runs later
-      element.hasNotFoundTemplate = !!noItemsTemplate;
+      // Set our attribute for the link function above which runs later.
+      // We will set an attribute, because otherwise the stored variables will be trashed when
+      // removing the element is hidden while retrieving the template. For example when using ngIf.
+      if (noItemsTemplate) element.attr('md-has-not-found', true);
 
       if (!attr.hasOwnProperty('tabindex')) element.attr('tabindex', '-1');