在 md-autocomplete 上使用 ng-blur？

Question

我想在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>

Plnkr

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

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

请问还有什么好的解决办法吗？

谢谢

Answer 1

添加了一个名为 onClickOutside 的指令，当在外部点击时，它将触发一个表达式 =32=] 他的嵌套项目。

此外，请注意您可以通过直接更改 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 属性

在 md-autocomplete 上使用 ng-blur？

Use ng-blur on md-autocomplete?

javascript

angularjs

angular-material