Wie setzt man den Fokus auf Textarea innerhalb eines angularen ui Modals jedes Mal, wenn man das Modal öffnet?

Question

Ich habe eine Textarea in einem Winkel ui modal, und muss Fokus darauf setzen, wenn das Modal sichtbar gemacht wird, kann nicht im Dokument geladen werden, weil es nur das erste Mal öffnet das Modal funktioniert.

Die Modal haben eine Animation zu öffnen, ich brauche den Fokus nach der Animation beendet.

Basierend auf andere Fragen hier recherchiert, habe ich die folgende Anweisung:

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

Aber diese Richtlinie überprüft immer den Fokus der Textarea. Da mein Modal ein anderes Eingabefeld hat, wenn ich darauf klicke, wird der Fokus wieder auf den Textbereich geändert, der die Direktive verwendet. Wie stelle ich Fokus nur das erste Mal, dass das Modal sichtbar gemacht wird?

UPDATE

Weitere Informationen: Das Problem der immer auf dem Text den Fokus halten wurde in einer Art und Weise gelöst.

Da mein Modal jedoch eine Einblendungsanimation enthält, wird im IE der Fokus oberhalb des Textfelds angezeigt, außerhalb muss ich Timeout für IE verwenden, um den Fokus korrekt einzustellen. Das ist nicht sehr nett. Ein besserer Weg?

Answer 1

Sie würden dies zu testen, ich bin nicht sicher, ob es funktionieren würde, aber könnten Sie ein Skript in der modalen HTML-Vorlage mit einem einfachen einbetten:

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

Answer 2

Ich verwende die folgende Version focus-me-Richtlinie mit winkliger ui-modaler Direktive.

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(); 
        }); 
       } 
      }); 
     } 
    }; 
}); 

Beispiel für die Verwendung Fokus-me in modaler Form Richtlinie:

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

Answer 3

spät für eine Antwort, aber wenn mehrere Direktive ist es am besten attr beobachten zu verwenden, wie u in Ausgabe mehrerer Richtlinie ausgeführt werden kann 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"/>