javascript - Angular JS : How can i fire ng-blur on input field as soon as is displayed?

Question

情况:

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

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

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

我想要得到的是:

单击“添加新文件夹”按钮并出现输入字段后，一旦我单击其他位置，它就会消失(无需在输入内容中单击一次)。

为了提供引用，我的意思是它在 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?