md-autocomplete 中的浮动级别和清除按钮答案

【问题标题】：Floating level and clear button in md-autocompletemd-autocomplete 中的浮动级别和清除按钮
【发布时间】：2020-06-10 07:43:47
【问题描述】：

正如https://github.com/angular/material/issues/2727 所说，不能同时使用浮动标签和角材料的默认清除按钮功能。那么通过使用指令来实现这种行为的干净方法是什么？

【问题讨论】：

标签： angularjs angularjs-directive angular-material md-autocomplete

【解决方案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。如果你对 $parse 理解有问题，请查看官方文档：https://docs.angularjs.org/api/ng/service/$parse

非常感谢@sebastianhenneberg！

【讨论】：