用于附加全局焦点事件的 AngularJS 方式

Posted 2023-02-25

【中文标题】用于附加全局焦点事件的 AngularJS 方式

【英文标题】：AngularJS-way for attaching global focus event

【发布时间】：2014-03-11 16:33:58

【问题描述】：

我正在寻找一种角度方式来将全局焦点事件附加到我网站上出现的所有输入字段，并将在未来出现。使用 jQuery，我会使用 live 方法，只需将事件处理程序放在 index.html 中。

我需要监听 focus 和 blur 事件，因为移动版 Safari 中 ios 7 上的虚拟键盘出现时出现错误。收到事件后，我必须在底部重新定位导航栏（请参阅此处了解错误iOS 5 fixed positioning and virtual keyboard）。

那么，实现这一点的最佳 Angular 方法是什么，而不是一直向控制器注入一些东西？有没有“全球通”？

【参考方案1】：

我会使用指令来捕获焦点/模糊，如下所示：

.directive('onFocusBlur',function() 
    return 
        restrict : 'A', 
        link : function($scope,$element,$attr) 
            $element.bind('focus',function() 
                $scope[$attr.onFocusBlur] = true;
            );
            $element.bind('blur',function() 
                $scope[$attr.onFocusBlur] = false;
            );
        
    
)

<!-- my focus/blur input -->
<input on-focus-blur="respoitionMyNav" />

<!-- my nav -->
<div ng-class=" reposition-class : respoitionMyNav ">
</div>

【讨论】：

感谢您的回答。但为此，我必须手动将on-focus-blur 放入所有输入字段。有没有办法自动处理这个问题？

由于 Angular 的声明性特性，没有办法做到这一点，就像使用 jquery 选择器字符串一样。我从来没有发现这是一个问题。如果您可以发布您的标记，我可能会就如何最好地做到这一点提供更多建议

好的，我明白了。但是我的范围有一些问题：模糊事件为我的输入元素触发，但$scope 指的是输入元素，而不是我的导航范围（它们在不同的范围内）。我该如何解决这个问题？

在这种情况下，我会使用 Angular 消息传递。来自指令：“$scope.$emit('onFocusBlurEvent',[true or false])”，以及来自另一个控制器 $rootScope.$on('onFocusBlurEvent',function(e,show) if(show) 。 ..);