angularjs - Angular Material : md-autocomplete - how to hide md-autocomplete-suggestions on Enter event?

Question

我有 md-autocomplete :

<md-autocomplete 
                         md-min-length="1"
                         ng-enter="presEnter();"
                         md-no-cache="true"                        
                         md-selected-item="selectedItem" 
                         md-search-text="searchText" 
                         md-items="item in querySearch(searchText)"
                         md-item-text="item.name" 
                         placeholder="Search for a vegetable">
          <span md-highlight-text="searchText">{{item.name}} :: {{item.type}}</span>
        </md-autocomplete>

带指令:ng-enter .

我的目标:当用户按下 Enter我要隐藏md-autocomplete-suggestions下拉

我从 HTML 中知道我需要以某种方式调用:$mdAutocompleteCtrl.hidden = true;但不知道如何使用 $mdAutocompleteCtrl在 Controller 中。

我用谷歌搜索，发现:

$timeout( function() { $scope.$$childHead.$mdAutocompleteCtrl.hidden = true; },100);

但没有$mdAutocompleteCtrl (至少在我的 JS 中，只有在 HTML 中，我不知道它的范围)

我玩这个 example :输入“a”，然后在下拉菜单后按 Enter。

有任何想法吗？

Answer 1

$mdAutocompleteCtrl被放置为自动完成范围的属性。

首先，您需要访问自动完成元素。一种方法是在自动完成上放置一个 ID:

<md-autocomplete id='Auto'
                 md-min-length="1"
                 ng-enter="presEnter();"
                 md-no-cache="true"
                 md-selected-item="selectedItem"
                 md-search-text="searchText"
                 md-items="item in querySearch(searchText)"
                 md-item-text="item.name"
                 placeholder="Search for a vegetable">

然后您可以使用该元素来获取自动完成的内部范围。因为自动完成元素本身在您提供的范围内，所以您需要获取自动完成的子元素之一的范围。

$scope.presEnter = function(e){
    var autoChild = document.getElementById('Auto').firstElementChild;
    var el = angular.element(autoChild);
    el.scope().$mdAutocompleteCtrl.hidden = true;
};

这是一个工作示例:http://codepen.io/anon/pen/rVPZKN?editors=101