个人中心
gpt4 book ai didi

javascript - 为什么在 AngularJS 的 twitter-bootstrap 模式(弹出窗口)中没有设置对文本框的关注

转载 作者：行者123 更新时间：2023-12-02 06:02:44 25 4
gpt4 key购买 nike

我一直在尝试实现此处建议的内容和其他类似的解决方案 How to set focus on input field?

PLUNKER我的代码无法使用自动对焦。

HTML 

  <body ng-controller='userNameController'>
  <button class="btn" id="enterUsernameBtn" href="#userNameModal" role="button" class="btn" data-toggle="modal" title="Enter Username" 
   ng-click="focusInput=true">Enter Username</button>


   <!-- UserName Modal -->
    <div id="userNameModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userNameModalLabel"
         aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="userNameModalLabel">Enter your username</h3>
        </div>


        <div class="modal-body">
            <div class="input-append">
                <input class="pull-left" id="userIdTextBox" type="text"
                ng-model="userName1" ng-minlength="1" ng-trim="true" focus-me="focusInput"/>
            </div>
        </div>


        <div class="modal-footer">
            <button class="btn" data-dismiss="{{whatToDismiss}}" aria-hidden="true" ng-click="submitUserName()">Submit</button>
        </div>
        </div>

  </body>

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=''; // workaround not to close the modal if it is an invalid input
  $scope.focusInput=false;

  $scope.submitUserName= function ()
  {    
    if($scope.userName1===undefined || $scope.userName1==="")
      {
          alert("Invalid Input");
          return;
      }

    alert("username entered"+$scope.userName1);  
    $scope.whatToDismiss='modal';

  }
});

没有一种解决方案适合我。每当模式打开时，我都会以某种方式将焦点设置在文本框上，但随后我不再通过 ng-model 获取 userName1 的值。在实现 focusMe 指令后 userName1 始终未定义。

编辑

打算试试这个 Can I use ng-model with isolated scope?

因为看起来 ng-model 不适用于上述解决方案

与此同时，有人回答了我的问题“如何在 twitter-bootstrap 模态中将自动对焦设置为文本框并能够通过 ng-model 获取在该文本框中输入的值”，请分享。

最佳答案

我修改了你的插件，http://plnkr.co/WKq83K ，并创建了这个工作插件:http://plnkr.co/edit/fsBjsW?p=preview

变化如下:

使用focus-me，而不是focusMe:

<input class="pull-left" id="userIdTextBox" type="text" ng-model="userName1"
 ng-minlength="1" ng-trim="true" focus-me="focusInput">

当对话框打开时，将 focusInput 设置为 true:

<button class="btn" id="enterUsernameBtn" href="#userNameModal" role="button"
 class="btn" data-toggle="modal" title="Enter Username" 
 ng-click="focusInput=true">Enter Username</button>

提交对话框时将其设置回false:

$scope.submitUserName= function() {    
   $scope.focusInput = false;
   ...

或取消:

<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
 ng-click="focusInput=false">x</button>

$timeout 需要稍等片刻才能呈现模态。小于 480 的值似乎不起作用，所以我使用了更大的值，700:

$timeout(function() {
   element.focus();
 }, 700);

关于javascript - 为什么在 AngularJS 的 twitter-bootstrap 模式(弹出窗口)中没有设置对文本框的关注，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17599504/

25 4 0
文章推荐： r - R 中的 If 语句，带有数据框
文章推荐： java - 为什么 arraylist 不存储来自多个客户端请求的值？
文章推荐： java - 在java中将多个内容输入到一个数组中
文章推荐： mips - MIPS 流水线处理器项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com