AngularJS – Focus auf ein Element setzen

Wie setzt man den Focus auf eine Textarea, wenn diese eingeblendet wird? Es folgt eine Lösung für AngularJS (Angular 1).

Angenommen, wir haben eine Textbox, die erst durch eine Bedingung oder ein Event eingeblendet wird. In diesem Fall hilft das HTML-Attribut autofocus nicht. Wir können das aber über eine Direktive lösen.

Schön wäre es, wenn wir unserer Textarea über ein einfaches Attribut sagen könnten, wenn sie den Focus erhalten soll. Also führen wir ein Attribut focus-me ein und geben diesem eine Bedingung mit.

<div ng-hide="isEdit" ng-click="isEdit = !isEdit">{{model.text}}</div>
<textarea data-ng-model="model.text" ng-show="isEdit" focus-me="isEdit" 
type="text" class="form-control" rows="3">{{model.text}}</textarea>

Wenn die Bedingung zutrifft, soll der Focus gesetzt werden. In unserem Fall wäre das, wenn der Edit-Mode true ist und die Textbox eingeblendet wird.

module Directives {
    'use strict';

    export class FocusMeDirective implements ng.IDirective {

        constructor(private $compile: ng.ICompileService, private $timeout: ng.ITimeoutService) { }

        link = (scope, element: JQuery, attrs: ng.IAttributes) => {
            scope.$watch(attrs['focusMe'], (value) => {
                if (value === true) {
                    this.$timeout( () => {
                        element[0].focus();
                    });
                }
            }, true);
        }

        static factory(): ng.IDirectiveFactory {
            var directive = ($compile: ng.ICompileService, $timeout: ng.ITimeoutService) => new FocusMeDirective($compile, $timeout);
            directive.$inject = ['$compile', '$timeout'];
            return directive;
        }
    }
}

Ich hoffe wie immer, diese erstbeste Lösung war hilfreich.