Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/86.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Angular Js:如何在显示时立即在输入字段上触发ng模糊?_Javascript_Html_Angularjs - Fatal编程技术网

Javascript Angular Js:如何在显示时立即在输入字段上触发ng模糊?

Javascript Angular Js:如何在显示时立即在输入字段上触发ng模糊?,javascript,html,angularjs,Javascript,Html,Angularjs,情况: <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"> <inpu

情况:

<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>
大家好。在我的应用程序中,我有一个创建新文件夹的按钮。 单击该按钮时,会出现一个输入字段,用于输入名称和创建文件夹

在输入字段上有一个ng模糊,如果输入不是空的,则创建文件夹,否则隐藏输入字段

在输入字段内单击至少一次后,ng模糊将被激活。否则不会触发。

我想得到的是:

单击“添加新文件夹”按钮并显示输入字段后,它将在我单击其他位置时立即消失(无需在输入中单击一次)

要有一个引用,我指的是它在Outlook中创建新电子邮件文件夹的工作方式

问题:

一旦光标出现,是否可以将其设置在输入字段内?通过这种方式,可能会触发ng模糊,我将获得所需的内容

或者,是否可以将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>
  • {{“添加”按钮{124;翻译}

  • 谢谢

    最好的解决方案实际上是在输入字段出现时立即将焦点设置在该字段上。在这种方式下,通过点击外部的ng模糊是我想要的发射

    以下是我设置焦点的方式:

    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>
    
    app.directive('focusMe',函数($timeout){
    返回{
    作用域:{trigger:'=focusMe'},
    链接:功能(范围、元素){
    范围:$watch('trigger',函数(值){
    如果(值===true)
    { 
    元素[0]。焦点();
    scope.trigger=false;
    }
    });
    }
    };
    });
    
  • {{“添加”按钮{124;翻译}
  • 在此StackOverflow答案中找到了解决方案:


    当输入框显示时,您可以使用ng focus对其进行对焦-在改变问题的处理方法后,可能会重复“是”。对不起。