在md-autocomplete上使用ng-blur吗？

max247 发表于 Dev

最大247

我希望用角形材料构建一个简单的可编辑输入栏，当我单击突出显示的文本时，它将打开一个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>

普伦克

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

我知道这是https://github.com/angular/material/issues/3906中的问题。我已经尝试过指令解决方案，但是它不起作用。

还有其他好的解决方案可以解决此问题吗？

谢谢

约瑟夫·哈鲁什（Jossef Harush）

添加了一个名为的指令onClickOutside，当在其嵌套项目之外单击时，它将触发一个表达式。

此外，请注意，您可以通过直接更改来保留控制器中的功能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;
        }
      }

    };

  });