2

我一直在尝试实施此处建议的内容和其他类似的解决方案 如何将焦点设置在输入字段上？

用不工作的自动对焦插入我的代码。

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';

  }
});

没有一个解决方案对我有用。每当模式打开时，我都会以某种方式将焦点设置在文本框上，但随后我不再获得userName1through的价值ng-model。执行focusMe指令后userName1始终未定义。

编辑

打算试试这个 我可以使用隔离范围的 ng-model 吗？

因为它似乎ng-model不适用于上述解决方案

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

4

4 回答 4

9

我修改了你的 plunker，http ://plnkr.co/WKq83K ，并创建了这个工作 plunker：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);
于 2013-07-16T03:23:18.460 回答
2

您在该帖子中找到的 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);
      }
    });
  };
});

柱塞

于 2013-07-11T18:06:34.750 回答
0

我已经使用以下 url Building dialog service using bootstrap modal来自定义我的警报和确认框。在这里，我有一个默认情况下自动对焦 ok 按钮。所以我使用了以下简单的指令，它对我来说没有任何麻烦，希望它对任何人都有帮助。

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

于 2014-02-28T12:49:01.913 回答
0

我想尽可能轻松地定义哪个输入字段将关注打开的模式，因此我创建了一个名为$modalprovider的扩展modal并将其放在一个单独的模块中。现在，每当我想在新打开的对话框中关注某些内容时，我只需编写：

function MyController(modal) {
    var modalInstance = modal.openExtended( { 
        focus: "#categoryName",
        // ... more options
    } );
}

现在我唯一需要做的就是使用modal.openExtended而不是为选项$modal.open提供focus参数。

扩展如下图：

angular.module('components', ['ui.bootstrap'])

  .service('modal', function($modal, $timeout) {
    var extended = angular.extend( $modal );
    $modal.openExtended = function( modalOptions ) {
      var modalInstance = $modal.open( modalOptions );
      if ( typeof( modalOptions.focus ) != "undefined" ) {
        modalInstance.opened.then( function() {
          $timeout( function() {
            $( modalOptions.focus ).focus();
             // The interval of 100 millis below is somewhat arbitrary.
             // Use something higher if the focus doesn't always work
          }, 100 );
        });
      }
      return modalInstance;
    };
    return extended;
  });

请注意，您需要将components模块包含到您的应用程序中，如下所示：

var app = angular.module('app', ['components', 'ui.bootstrap']);
于 2014-04-07T10:48:58.957 回答