3

我的页面上有一个类似选项卡的视图，并且有各种需要将焦点设置到其中一个选项卡的事件。（显示/隐藏 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' );

4

2 回答 2

2

您可以广播事件，也可以让侦听器在此类广播发生后执行操作。

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

然后你会有一个像这样的监听器，你可以在其中选择想要的选项卡：

$scope.$on('changed-tab', function(e, objectSentWithBroadcast) {
   // do something here to select the tab
});
于 2013-04-15T13:45:56.247 回答
0

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

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

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

http://plnkr.co/edit/bntEsfngnJKuneg2raD1

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

于 2013-04-15T13:45:43.217 回答