Angulaire Matériel: md-saisie semi-automatique - comment masquer md-saisie semi-automatique-suggestions sur l'Entrée de l'événement?

TLDR: Exemple de code qui déclenche cacher http://codepen.io/anon/pen/mJvGzp?editors=101

Le Problème(s):

Tout d'abord, le "Angulaire Façon" suggère que la manipulation de directives dans votre Contrôleur doit être évitée. Le Contrôleur doit essentiellement juste de le récupérer (via les Services, etc.) et de fournir les données nécessaires à la construction de la vue; il doit généralement éviter de se soucier exactement ce que la façon dont ces points de vue sont mis en place (c'est à dire qu'il devrait ne sais pas ce que les directives seront utilisés). Il existe plusieurs bonnes raisons pour cela, peut-être que cela rend la vie beaucoup plus facile lorsque vous souhaitez modifier la vue, tels que la permutation des directives.

Si des directives ont vraiment besoin d'être modifié manuellement, il est préférable de le faire à partir d'une autre directive. Cela permet plus de souplesse, et simplifie la maintenance plus tard (même exemple: si le remplacement pour les différentes directives de saisie semi-automatique).

Aussi, bien qu'il semble être le seul moyen de résoudre le problème dans ce cas, le $scope.$$childHead.$mdAutocompleteCtrl.hidden code semble assez hacky - à moins qu'il n'y a pas d'autre choix, il convient d'éviter d'accéder à des propriétés de départ avec $$, et aussi d'éviter la modification de la fratrie directives sans le faire via partagé propriétés de portée.

Malheureusement, après de creuser dans le code source ( sur le branche master ), je ne pouvais pas trouver tout de mieux que de déclencher la fonction masquer que, comme vous l'avez suggéré) à saisir la portée et de modifier le hidden propriété.

Un autre problème avec l'accès via le Contrôleur, c'est que c'est un peu plus difficile parce qu'il est imbriqué au travers de quelques autres étendues. Vous pouvez transmettre l'événement, prenez le nœud DOM, et tirez vers le haut de son champ d'application, mais c'est beaucoup de chose sans pertinence dans un Contrôleur.

La Solution:

Donc, au lieu de cela, nous pouvons ajouter un frère ou d'une directive, semblable à la ngEnter exemple de directive que vous avez inclus dans le Codepen exemple. Peut-être quelque chose d'un peu plus explicite, de sorte que c'est un peu plus évident de ce qu'il fait:

.directive('mdHideAutocompleteOnEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$$childHead.$mdAutocompleteCtrl.hidden = true; //$scope  modified to scope
                });

                event.preventDefault();
            }
        });
    };
});

Le HTML serait tout simplement d'inclure cette directive, lorsque cela est pertinent:

<md-autocomplete 
               md-hide-autocomplete-on-enter
               md-items="item in querySearch(searchText)"
               md-item-text="item.name">
     <span md-highlight-text="searchText">{{item.name}} :: {{item.type}}</span>
</md-autocomplete>

Voici l'exemple modifié, avec en action: http://codepen.io/anon/pen/mJvGzp?editors=101

OriginalL'auteur DRobinson

La meilleure façon d'accéder à des méthodes du controller est de cibler l'élément et ensuite utiliser le jqLite objet pour accéder au contrôleur:

var $acElement = angular.element(document.getElementById('Auto'));
var acCtrl = $acElement.controller('mdAutocomplete');
acCtrl.hidden = true;

Chaque fois que vous accéder à n'importe quoi à l'aide de la scope() méthode sur angulaire de l'élément, votre application va casser si jamais vous souhaitez désactiver angulaire des informations de débogage.

OriginalL'auteur smola