情况:
大家好。在我的应用程序中,我有一个用于创建新文件夹的按钮。 单击该按钮时,会出现一个输入字段,您可以在其中输入名称并创建文件夹。
在输入字段上有一个 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>
谢谢
最佳答案
最好的解决方案实际上是在输入字段出现时立即将其设置为焦点。通过这种方式,通过点击外部 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 答案中找到了解决方案:
关于javascript - Angular JS : How can i fire ng-blur on input field as soon as is displayed?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30026411/