javascript – 在md-autocomplete上使用ng-blur?

前端之家收集整理的这篇文章主要介绍了javascript – 在md-autocomplete上使用ng-blur?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我希望在角度材质中构建一个简单的可编辑输入栏,当我点击高亮文本时,它将打开一个md-autocomplete,如果我点击外部部分,它将关闭md-autocomplete并显示文本.

Plnkr

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

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

有没有其他好的解决方案来解决这个问题?

谢谢

最佳答案
添加了一个名为onClickOutside的指令,它会在单击嵌套项目外部时触发表达式.

此外,请注意,您可以通过直接更改vm.editableEnabled = true / false来保留控制器中的功能

在线演示 – http://plnkr.co/edit/5NlWD2bXFkGPXuj0Awav?p=preview

enter image description here

JavaScript的:

  1. .directive('onClickOutside',function($timeout) {
  2. return {
  3. restrict: 'A',scope: {
  4. onClickOutside: "&"
  5. },link: function(scope,element,attr) {
  6. angular.element(document).bind('click',function(event) {
  7. var isChild = childOf(event.target,element[0]);
  8. if (!isChild) {
  9. scope.$apply(scope.onClickOutside);
  10. }
  11. });
  12. function childOf(c,p) {
  13. while ((c = c.parentNode) && c !== p);
  14. return !!c;
  15. }
  16. }
  17. };
  18. });

猜你在找的JavaScript相关文章