Плавающий уровень и кнопка очистки в md-autocomplete

Question

Как https://github.com/angular/material/issues/2727 говорит, что нельзя использовать плавучую метку и функциональные возможности переключателя по умолчанию с угловым материалом. Итак, какой чистый способ достичь такого поведения, используя директиву?

Answer 1

HTML

<md-autocomplete md-floating-label="LABEL" 
       md-selected-item="$ctrl.model" md-search-text="$ctrl.searchText" 
       md-selected-item-change="$ctrl.itemChanged($ctrl.model)" 
       md-items="item in $ctrl.items" clear-autocomplete 
       md-autoselect="true" required> 
    /* whatever you need, e.g. <md-item-template> or <md-not-found> tags */ 
</md-autocomplete> 

Ни один из атрибутов CTRl $ не должен быть назван так, как они здесь, просто называть их как угодно.

ДИРЕКТИВА

angular 
    .module('yourModule') 
    .directive('clearAutocomplete', clearAutocomplete); 

function clearAutocomplete($parse) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     const button = angular.element('<md-button>').addClass('clear-autocomplete'); 
     button.append('<i class="material-icons">clear</i>'); 
     element.append(button); 

     let searchTextModel = $parse(attrs.mdSearchText); 

     scope.$watch(searchTextModel, function(searchText) { 
     if (searchText && searchText !== '' && searchText !== null) { 
      button.addClass('visible'); 
     } else { 
      button.removeClass('visible'); 
     } 
     }); 

     button.on('click', function() { 
     searchTextModel.assign(scope, undefined); 
     }); 
    } 
    } 
} 

CSS (это, конечно, опциональным)

.em-clear-autocomplete { 
    position: absolute; 
    transform: translate(0, -100%); 
    right: 8px; 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s, opacity 0.25s linear; 

    &.visible { 
    visibility: visible; 
    opacity: 1; 
    cursor: pointer; 
    } 

    i { 
    font-size: 20px; 
    } 
} 

Если вы используете предварительно ES16, просто замените let и const по var. Если у вас есть проблемы с пониманием синтаксиса $, посмотрите официальный документ: https://docs.angularjs.org/api/ng/service/ $ parse

Огромное спасибо @sebastianhenneberg!