Skorzystaj z opcji ng-blur w md-autocomplete?

Question

Chciałbym zbudować prosty, edytowalny pasek wprowadzania w kanciastym materiale, gdy kliknę w jasny tekst, otworzy się md-autocomplete, a po kliknięciu na zewnątrz zamknie się md-autocomplete i wyświetli tekst.

<div ng-hide="vm.editableEnabled" ng-click="vm.enableEditorTitle()"> 
    <span class="hight-light">{{vm.group.name}}</span> 
</div> 

<md-autocomplete ng-show="vm.editableEnabled" 
.... 
.... 
ng-blur="vm.disableEditorTitle()"> 
</md-autocomplete> 

Plnkr

Ale ng-blur nie działa w md-autocomplete.

Wiem, że jest to problem w https://github.com/angular/material/issues/3906. Próbowałem rozwiązania dyrektywy, ale to nie działa.

Czy istnieje jakieś inne dobre rozwiązanie, aby rozwiązać ten problem?

Dzięki

Answer 1

Dodany dyrektywy nazywa onClickOutside będzie wyzwalać ekspresję gdy kliknięciu poza jego zagnieżdżonych elementów.

Ponadto należy pamiętać, że można oszczędzić funkcje w kontrolerze bezpośrednio zmieniając vm.editableEnabled = true/false

---

online Demo - http://plnkr.co/edit/5NlWD2bXFkGPXuj0Awav?p=preview

<div on-click-outside="vm.editableEnabled = false"> 
    <div ng-hide="vm.editableEnabled" ng-click="vm.editableEnabled = true" ... > 
    <md-autocomplete ng-show="vm.editableEnabled" ... > 
</div> 

javascript:

.directive('onClickOutside', function($timeout) { 
    return { 
     restrict: 'A', 
     scope: { 
     onClickOutside: "&" 
     }, 
     link: function(scope, element, attr) { 

     angular.element(document).bind('click', function(event) { 
      var isChild = childOf(event.target, element[0]); 
      if (!isChild) { 
      scope.$apply(scope.onClickOutside); 
      } 

     }); 

     function childOf(c, p) { 
      while ((c = c.parentNode) && c !== p); 
      return !!c; 
     } 
     } 

    }; 

    }); 

Answer 2

cna można użyć atrybutu md-search-text-change