How to set focus on textarea within a angular ui modal every time open the modal?

Question

I have a textarea within an angular ui modal, and need to set focus to it when the modal is made visible, can not be in the document load because it works only the first time open the modal.

The modal have an animation to open, I need set focus after animation finished.

Based on other issues researched here, I created the following directive:

.directive('focusMe', ['$timeout', focusMe]);
  function focusMe($timeout) {
    return function (scope, element) {
    scope.$watch(function () {
      $timeout(function () {
        element[0].focus();
      });
    });
  };
};

But this directive always checks the focus of the textarea. As my modal has another input field, when I click on it, the focus is again changed to the textarea that is using the directive. How do I set focus only the first time that the modal is made visible?

UPDATE

More information: The problem of always keep the focus on the textarea was resolved, in a way.

But as my modal has a fade in animation, in IE the focus is displayed above the text box, outside, I'm having to use timeout to IE to set correctly focus. That's not very nice. Some better way?

Solution 1

I use the following version of focus-me directive with angular ui-modal directive.

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

Example of using focus-me directive in modal form:

<div class="modal-header">
    some header
</div>
<div class="modal-body">
    <form name="someForm" method="post" novalidate="">
        <fieldset>
            <textarea name="answerField" placeholder="Enter text..."  focus-me="true" ng-model="model.text"></textarea>
        </fieldset>
    </form>
</div>
<div class="modal-footer">
    some footer
</div>

Solution 2

Late for an answer but when using multiple directive it is best to use attr observe as u can run into issue of multiple directive creating isolate scope

ControlDirectives.directive('focusMe', function ($timeout) {
    return {
        link: function (scope, element, attr) {
            attr.$observe('focusMe', function (value) {
                if (value === "true") {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
        }
    };
});

<input name="baseCode" focus-me="true" type="text"/>

Solution 3

You'd have to test this, I'm not sure if it would work, but could you embed a script into your modal's HTML template with a simple:

...
<script>document.getElementById('fieldId').focus();</script>
...