在md-autocomplete上使用ng-blur？

Question

我希望在角度材質中構建一個簡單的可編輯輸入欄，當我點擊高亮文本時，它將打開一個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>

Plnkr

但是ng-blur在md-autocomplete不起作用。

我知道這是https://github.com/angular/material/issues/3906中的一個問題。 我已經嘗試了指令解決方案，但它不起作用。

有沒有其他好的解決方案來解決這個問題？

謝謝

Answer 1

添加了一個名為onClickOutside 的指令 ，它會在單擊嵌套項目外部時觸發表達式 。

此外，請注意， 您可以通過直接更改vm.editableEnabled = true/false來vm.editableEnabled = true/false控制器中的功能

---

在線演示 - 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

您可以使用md-search-text-change屬性