Question

情况：

大家好。在我的应用程序中，我有一个按钮来创建一个新文件夹。单击该按钮时，会出现一个输入字段，用于输入名称并创建文件夹。

在输入字段上有一个ng-blur，如果输入不为空，则创建文件夹，否则隐藏输入字段。

一旦我在输入字段内点击至少一次，就会激活ng-blur。否则不会被解雇。

我想获得的是：

按钮＆＃39;添加新文件夹＆＃39;单击并显示输入字段，一旦我点击其他地方它就会消失（无需在输入中单击一次）。

要获得引用，我的意思是它在Outlook中如何工作以创建新的电子邮件文件夹。

问题：

是否可以将光标设置在输入字段内？一旦出现？这样可能会触发ng-blur，我将获得所需的内容。

或者，可以将相同的ng-blur功能应用于按钮吗？

代码：

<li> <a href="#" ng-click="set_new_folder_box()"><i class="fa fa-plus"></i> Add folder</a> </li>

<li ng-if="folder_box_view == 'display_folder_box'"> 
    <div class="input-group">
        <input type="text" class="form-control" ng-model="new_folder_name" ng-blur="folder_blur( new_folder_name )">
        <span class="input-group-btn">
             <button class="btn btn-default" type="button" ng-click="folder_new( new_folder_name )">{{ 'ADD_BUTTON' | translate }}</button>
        </span>
    </div>

</li>

谢谢

Answer 1

最佳解决方案实际上是在输入字段出现后立即将焦点设置在输入字段上。通过这种方式点击外面的ng-blur就像我想要的一样。

这就是我设定焦点的方式：

app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '=focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === true) 
        { 
            element[0].focus();
            scope.trigger = false;
        }
      });
    }
  };
});




<li> <a href="#" ng-click="set_new_folder_box(); focusInput=true;"><i class="fa fa-plus"></i> Add folder</a> </li>

<li ng-if="folder_box_view == 'display_folder_box'"> 
  <div class="input-group">
    <input type="text" class="form-control" ng-model="new_folder_name" ng-blur="folder_blur( new_folder_name )" focus-me="focusInput">
    <span class="input-group-btn">
         <button class="btn btn-default" type="button" ng-click="folder_new( new_folder_name )">{{ 'ADD_BUTTON' | translate }}</button>
    </span>
  </div>

</li>

在StackOverflow答案中找到了解决方案：

How to set focus on input field?

Angular Js：如何在显示时立即在输入字段上触发ng-blur？

1 个答案: