Use ng-blur on md-autocomplete?

Question

I wish to build a simple editable input-bar in angular material, when I click the high-light text, it will open a md-autocomplete, and if I click outside part, it will close the 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 the ng-blur does not work in md-autocomplete.

I know this is a issue in https://github.com/angular/material/issues/3906. I have tried the directive solution but it does not work.

It there any other good solution to solve this ?

Thanks

Answer 1

Added a directive called onClickOutside, it will trigger an expression when a clicked outside of his nested items.

In addition, note that you can spare the functions 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;
        }
      }

    };

  });