为什么在AngularJS中，不能在Twitter Bootstrap模态框（弹出框）内设置文本框的焦点？

8 浏览
0 Comments

为什么在AngularJS中，不能在Twitter Bootstrap模态框（弹出框）内设置文本框的焦点？

我一直在尝试实现这里和其他类似的解决方案：如何设置输入框的焦点？我的代码与不起作用的自动聚焦一起PLUNKER。

HTML

JavaScript

var app = angular.module('abcApp',[]);
app.directive('focusMe', function($timeout) {
    return {
        scope: { trigger: '@focusMe' },
        link: function(scope, element) {
            scope.$watch('trigger', function(value) {
                if(value === "true") {
                    $timeout(function() {
                        element[0].focus();
                    });
                }
            });
        }
    };
});
app.controller('userNameController',function ($scope)
{
  $scope.whatToDismiss=''; // 避免在输入无效时关闭模态框
  $scope.focusInput=false;
  $scope.submitUserName= function ()
  {    
    if($scope.userName1===undefined || $scope.userName1==="")
      {
          alert("无效输入");
          return;
      }
    alert("输入的用户名为"+$scope.userName1);  
    $scope.whatToDismiss='modal';
  }
});

对我来说，没有任何解决方案起作用。当模态框打开时，我可以在文本框上设置焦点，但是无法通过ng-model获取userName1的值。在实现focusMe指令后，userName1始终是未定义的。

编辑

我将尝试这个：我可以在隔离作用域中使用ng-model吗？因为似乎ng-model对于上述解决方案不起作用。与此同时，任何人对我这个问题的回答：“如何将自动聚焦设置到Twitter Bootstrap模态框中的文本框，并能够通过ng-model获取输入的值？”请分享。

0

3 答案

0 Comments

问题出现的原因是因为在Twitter Bootstrap的弹出框（modal）中，使用AngularJS时无法设置文本框（textbox）获得焦点。为了解决这个问题，作者参考了一个自定义弹出框的教程，并使用了一个简单的指令（directive），通过设置焦点来实现默认聚焦到“确定”按钮上。

解决方法是创建一个名为“focusMe”的指令，在link函数中监听指令绑定的变量（attrs.focusMe），当变量的值发生变化时，使用$timeout函数来延迟20毫秒后调用element[0].focus()方法来设置焦点。

还有在注释部分可以使用$compile选项来自定义元素的内部HTML。

下面是整理后的文章：

我使用了以下链接Building dialog service using bootstrap modal来自定义我的警告框和确认框。在这里，我遇到了一个需要默认聚焦到“确定”按钮上的情况。所以我使用了下面这个简单的指令，而且它对我来说非常好用，希望对其他人也有所帮助。

myApp.directive('focusMe', function($timeout, $compile) {
    return {
        link: function (scope, element, attrs) {
            scope.$watch(attrs.focusMe, function(val) {
                // element.html(anyHtmlHere);
                // $compile(element.contents())(scope);
                $timeout(function() {
                    element[0].focus();
                }, 20);
            });
        }
    };
});

在这里，你可以使用注释部分的$compile选项来自定义元素的内部HTML。

0
0 Comments

问题的原因是，focusMe指令在ng-model中使用时需要进行一些修改。该指令定义了一个独立的作用域，因此ngModel无法向上传递到父级控制器作用域中。

解决方法是重新定义指令，不使用单独的作用域，并通过链接函数的attrs对象获取focusMe属性的值。

代码如下：

app.directive('_focusMe', function($timeout) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.focusMe, function(value) {
      if(value) {
        $timeout(function() {
          element.focus();
        }, 20);
      }
    });
  };
});

另外，还可以参考stackoverflow上的相关解决方案：stackoverflow.com/questions/14859266/…

然而，当文本框位于模态框（弹出窗口）中时，自动聚焦功能不起作用。你可以在这里查看将模态框与代码一起使用的效果：plnkr.co/WKq83K。如果我遗漏了什么，请告诉我。

0
0 Comments

问题出现的原因是因为在使用AngularJS和Twitter Bootstrap模态框（弹出窗口）时，无法设置文本框的焦点。解决方法是修改代码，使用focus-me指令来设置焦点，并在打开和关闭模态框时将focusInput变量设置为true和false。此外，还需要使用$timeout函数等待一段时间以确保模态框已经渲染完毕。该问题在Stack Overflow的讨论中也有提及，并且指出了将变量设置为true和false的原因。

0