Question

我的页面上有一个类似标签的视图，我有各种需要将焦点设置到其中一个标签的事件。（显示/隐藏div很容易，因为我只使用模型变量。）导致div聚焦的事件是单击选项卡标题，数据加载完成和初始加载。我知道在哪里拦截所有这些事件，但我不知道如何告诉其他元素设置焦点（拦截网站没有一个知道另一个元素，只知道模型）。

我环顾四周但却找不到一个很好的参考。我想我想听一些消息并从其他各个地方发布。

如何设置此类消息传递事件？

答案：我建立了答案并提出了以下指令。它结合了div的焦点和显示状态。

newsendApp.directive('showAndFocus', function() {
    return {
        link: function(scope, element, attr){ 
            scope.$on('SetArticlesListFocus',function() {
                if( scope.$eval( attr.showAndFocus ) ) {
                    $(element).focus();
                }
            })

            scope.$watch(attr.showAndFocus, function(value) {
                if( value ) {
                    $(element).show();
                    setTimeout( function() { $(element).focus(); }, 0 );
                } else {
                    $(element).hide();
                }
            })
        }
    }
});

如果发生可能需要重置焦点的事件，我会执行：$rootScope.$broadcast( 'SetArticlesListFocus' );

Answer 1

您可以广播一个事件，并且一旦发生这样的广播就会让听众执行一个动作。

您可以使用$scope.$broadcast('changed-tab', objectSentWithBroadcast)。第二个参数是您可以选择发送的对象，例如您要关注的选项卡。

然后你会有一个像这样的听众，你可以选择想要的标签：

$scope.$on('changed-tab', function(e, objectSentWithBroadcast) {
   // do something here to select the tab
});

Answer 2

看看angularjs中提出的这个问题。

https://github.com/angular/angular.js/issues/1277#issuecomment-16012024

这是最终的plunk，它创建了一个ng-focus指令，用于管理变量和元素焦点状态之间的双向数据绑定。

http://plnkr.co/edit/bntEsfngnJKuneg2raD1

这将允许您将模型绑定到元素焦点状态，然后设置或取消设置此变量将使元素获得/失去焦点。您必须注意，如果您使用div等（默认情况下不可聚焦！），您需要在它们上设置tabIndex = -1。除此之外，它应该可以正常工作，并且非常适合您操作模型的需要。

单击另一个元素或发生其他事件时设置焦点

2 个答案: