Use ng-blur on md autocomplete?

Question

I want to create a simple editable input panel in angular material, when I click on high-light text, it will open md-autocomplete , and if I click on the outside, it will close md-autocomplete and show the text.

 <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

But ng-blur does not work in md-autocomplete .

I know this is a problem in https://github.com/angular/material/issues/3906 . I tried a directory solution, but it does not work.

Is there another good solution to solve this issue?

thanks

Answer 1

A directive called onClickOutside , it will trigger the expression when it clicks outside its nested elements.

Also, note that you can save features in your controller by directly changing 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 uses the md-search-text-change attribute