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

Question

THE SITUATION:

Hello guys. In my app i have a button to create a new folder. When that button is clicked there appears an input field where to enter the name and create the folder.

On the input field there is an ng-blur that creates the folder if the input is not empty, otherwise hide the input field.

The ng-blur is activated once i click inside the input field at least one time. Otherwise is not fired.

What I would like to obtain is this:

Once the button 'Add a new folder' is clicked and the input field appears, it will disappear as soon as i click somewhere else (without having to click inside the input one time).

To have a reference, i mean exactly how it works inside Outlook to create a new email folder.

THE QUESTION:

Is it possible to set the cursor inside the input field, once it appears? In this way the ng-blur will probably be fired and i will obtain what i need.

Alternatively it is possible to apply the same functionality of ng-blur to a button?

THE CODE:

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

Thank you

You can use ng-focus to focus it when the input box shows up - https://docs.angularjs.org/api/ng/directive/ngFocus — Kushal, May 04 '15 at 10:36
possible duplicate of [How to set focus on input field?](http://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field) — nilsK, May 04 '15 at 10:59
Yes it may be, after having changed approach to the problem. Sorry for that. — FrancescoMussi, May 04 '15 at 11:00

score 0 · Accepted Answer · edited May 23 '17 at 11:59

The best solution was actually to set the focus on the input field as soon as it appears. In this way by clicking outside the ng-blur is fired as i wanted.

This is how i set the focus:

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>

The solution was found in this StackOverflow answer:

How to set focus on input field?

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

1 Answers1