2

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

    }

}]);

回答/提案は大歓迎です。ありがとうございました！

4

2 に答える 2

1

autofocusHTML5 で導入された属性があります。最初の入力要素にその属性を追加することをお勧めします。

<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 はすべてのディレクティブを実行します。このディレクティブは、別のビューから戻った後に要素にフォーカスします。

于 2016-06-03T16:44:30.253 に答える