Javascript 在md自动完成上使用ng模糊？

我希望在angular material中构建一个简单的可编辑输入栏，当我单击高亮文本时，它将打开一个

md autocomplete

，如果我单击外部部分，它将关闭

md autocomplete

，并显示文本

<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>

{{vm.group.name}

但是

ng blur

在

md autocomplete

中不起作用

我知道这是一个问题。

---

我已经尝试过直接的解决方案，但它不起作用

有没有其他好的解决办法

---

谢谢

添加了一个名为

onClickOutside

的指令，当一个在其嵌套项的外部单击时，它将触发一个表达式

此外，请注意，您可以通过直接更改

vm.editableEnabled=true/false

---

在线演示-

---

你可以使用md search text change属性

看到这一点，我已经尝试了指令解决方案，但它不起作用。我建议，如果md blur在md autocomplete中不起作用，并且你的包含md autocomplete的div元素足够隔离。请尝试在单击div的主体时绑定方法“vm.disableeditortile（）”。很好的解决方案！非常感谢你！

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

.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;
        }
      }

    };

  });