Verwenden Sie ng-Blur auf MD-Autocomplete?

Question

Ich möchte eine einfache bearbeitbare Input-bar in eckigen Material zu bauen, wenn ich den high-light Text klicken, wird es geöffnet md-autocomplete, und wenn ich außerhalb Teil klicken, wird es schließen md-autocomplete und den Text anzeigen.

<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

Aber die ng-blur funktioniert nicht in md-autocomplete.

Ich weiß, das ist ein Problem in https://github.com/angular/material/issues/3906. Ich habe versucht, die Richtlinie Lösung, aber es funktioniert nicht.

Gibt es da noch eine andere gute Lösung, um das zu lösen?

Dank

Answer 1

Added eine RichtlinieonClickOutside genannt, wird es einen Ausdruck auslösen wenn ein außerhalb seiner verschachtelten Elemente geklickt.

Darüber hinaus beachten Sie, dass Sie die Funktionen in Ihrem Controller vm.editableEnabled = true/false

---

Online-Demo von direkt Wechsel erübrigen können - 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

Sie verwenden CNA die md-search-Text-Änderung Attribut