路由更改后无法专注于 Angular 表单文本输入

Question

我正在创建一个带有 Angular 和 Angular 消息的表单。此表单位于一个模板中，该模板通过 Angular Route 被带入视图。当我第一次加载表单时，一切正常。然后，当我加载不同的视图并切换回表单的视图时，我无法专注于文本输入。发生了什么事？

HTML

<form name='submission' ng-submit='submit()'>

    <label class='text-input-group' for='name'>
        <div class='label'>Name</div>
        <input id='name' name='name' ng-model='submissionName' type='text' required>
        <div ng-messages='submission.name.$error' ng-if='submission.name.$touched'>
            <div ng-message='required'>* Please enter your name</div>
        </div>
    </label>

    <label class='text-input-group' for='email'>
        <div class='label'>Email</div>
        <input id='email' name='email' ng-model='submissionEmail' type='email' required>
        <div ng-messages='submission.email.$error' ng-if='submission.email.$touched'>
            <div ng-message='required'>* Please enter your email address</div>
            <div ng-message='email'>* Please enter a valid email address</div>
        </div>
    </label>

    <label class='text-input-group' for='message'>
        <div class='label'>Message</div>
        <textarea id='message' name='message' ng-model='submissionMessage' ng-maxlength='2000' maxlength='2000' required></textarea>
        <div ng-messages='submission.message.$error' ng-if='submission.message.$touched'>
            <div ng-message='required'>* No message?</div>
            <div ng-message='maxlength'>* Your message unfortunately can&#x27;t exceed 20,000 characters</div>
        </div>
    </label>

    <label class='checkbox-input-group' for='send-user-a-copy'>
        <div class='label'>Send me a copy</div>
        <input id='send-user-a-copy' name='sendUserACopy' ng-init='submissionSendUserACopy = false;' ng-model='submissionSendUserACopy' type='checkbox'>
    </label>

    <button type='submit'>Button</button>

</form>

JavaScript

var contact = angular.module('app.contact', ['ngRoute']);

contact.config(['$routeProvider', function($routeProvider) {

    $routeProvider.when('/contact', {
        templateUrl: 'partials/contact.html',
        controller: 'ContactController'
    });

}]);

contact.controller('ContactController', ['$scope', function($scope) {

    $scope.reset = function() {
        $scope.submissionName = '';
        $scope.submissionEmail = '';
        $scope.submissionMessage = '';
        $scope.submissionSendUserACopy = '';
        $scope.submission.$setPristine();
    }

    $scope.$on('$routeChangeSuccess', function() {
        console.log($scope.submission);
        $scope.reset();
    });

    $scope.submit = function() {

        if($scope.submission.$valid) {
            console.log({
                'name' : $scope.submissionName,
                'email' : $scope.submissionEmail,
                'message' : $scope.submissionMessage,
                'sendUserACopy' : $scope.submissionSendUserACopy
            });
        }

    }

}]);

任何答案/建议将不胜感激。谢谢！

Answer 1

我写这篇文章是为了解决焦点不适用于 Angular 中的路由更改的问题。

import { Directive, ElementRef, AfterContentInit } from '@angular/core';

@Directive({
  selector: '[focusOnInit]'
})
export class FocusDirective implements AfterContentInit {

  constructor(public el: ElementRef) {}

  ngAfterContentInit() {
   this.el.nativeElement.focus();
  }
}

用法

<input type="text" focusOnInit>

Answer 2

在 HTML5 中引入了一个属性autofocus。我建议您在第一个输入元素中添加该属性。

<input type="text" ng-model="firstName" autofocus />

但这也有限制！！目前，浏览器只关注页面加载时的输入元素指令。因此，您将陷入与当前面临的相同问题。因此，您可以简单地添加一个具有相同名称的 Angular 指令，即autofocus，它将以编程方式聚焦元素，因为当再次加载相同的视图时执行该指令。

myApp.directive('autofocus', [function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element[0].focus();
        }
    };
}]);

(这是Angular 1中的格式，如果你使用Angular 2，请写在Angular 2中。)

由于之前已经加载过相同的视图，Angular 会在再次加载视图时执行所有指令，该指令将在您从另一个视图切换回来后聚焦元素。