我正在创建一个包含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'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
});
}
}
}]);
任何答案/建议都将不胜感激。谢谢!
答案 0 :(得分: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将在再次加载视图时执行所有指令,此指令将在您从另一个视图切换回来后关注该元素。
答案 1 :(得分:0)
我写这篇文章是为了解决这个问题,焦点不适用于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>