angular-modal-service set focus not working

12 浏览
0 Comments

angular-modal-service set focus not working

我正在使用angular模态服务，并尝试为平滑的用户体验实现一些按键功能。

问题是，当模态框弹出时，它没有焦点。焦点仍然在点击按钮以激活模态框的位置。

有没有办法在不重新加载页面的情况下重置自动对焦？或者有没有办法在模态框激活时抓取焦点，但每次模态框打开时都这样做？

我尝试按照此帖子中的答案中描述的方式实现焦点服务，但无法在模态框中使用它。

这里有一个示例行为的plunker：

Plunker

0

1 答案

0 Comments

angular-modal-service set focus not working的原因是没有正确设置焦点。解决方法是使用一个指令来在需要设置焦点的元素上进行设置，并在控制器中添加一个延时函数，以确保在显示模态框后再设置焦点。

具体实现如下：

首先，在需要设置焦点的元素上添加一个指令，命名为syncFocusWith：

app.directive('syncFocusWith', function($timeout, $rootScope) {
    return {
        restrict: 'A',
        scope: {
            focusValue: "=syncFocusWith"
        },
        link: function($scope, $element, attrs) {
            $scope.$watch("focusValue", function(currentValue, previousValue) {
                if (currentValue === true && !previousValue) {
                    $element[0].focus();
                } else if (currentValue === false && previousValue) {
                    $element[0].blur();
                }
            })
        }
    }
});

然后，在模态框的控制器中添加一个延时函数，让模态框显示后再设置焦点：

$timeout(function() {
    $scope.isFocused = true;
}, 500)

最后，在需要设置焦点的元素上添加sync-focus-with属性，并将其绑定到控制器中定义的变量isFocused上：

sync-focus-with="isFocused"

通过以上步骤，解决了angular-modal-service set focus not working的问题。

0