Question

我正在创建一个包含Angular和Angular Messages的表单。此表单位于一个模板中，该模板通过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

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

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

但这也有局限性!!目前，浏览器只关注页面加载时的input元素指令。所以你会遇到你目前面临的同样问题。所以你可以简单地添加一个具有相同名称的Angular指令，即autofocus，它将以编程方式聚焦元素，因为当再次加载相同的视图时执行该指令。

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

（这是Angular 1中的格式，如果您使用的是Angular 2，请在Angular 2中编写。）

由于之前加载了相同的视图，Angular将在再次加载视图时执行所有指令，此指令将在您从另一个视图切换回来后关注该元素。

Answer 2

我写这篇文章是为了解决这个问题，焦点不适用于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>

在路线改变之后，不能专注于角度形式的文本输入

2 个答案: