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

Question

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

我环顾四周，但找不到很好的引用资料。我假设我想收听一些消息并从其他各个位置发布它。

如何设置这种类型的消息传递事件？

---

ANSWER:我在答案的基础上提出了以下指令。它结合了 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
});