AngularJS - Возможность автоматического ввода полей при нажатии модальных

Question

Я гуглял на предмет возможности этого, но ничего не нашел, возможно, я гуглил не ту вещь, но я обычно не могу ее найти, поэтому мне интересно, возможно ли это сделать в все.

Попытка сделать его удобным для пользователя, возможен, когда вы нажимаете, чтобы ввести значение в модальном представлении. Вместо того, чтобы нажимать на текстовое поле, возможно ли, чтобы оно автоматически начинало печатать, когда оно появляется, вместо того, чтобы нажимать на него?

AngularJS:

app.controller('UserGroupCtrl', function ($scope, $state, $stateParams, $compile, $uibModal, $log, SpringDataRestService, NgTableParams) {

    $scope.refreshUserGroups = function () {
        SpringDataRestService.query(
            {
                "collection": "userGroupsInternal",
                "method": "flattened"
            },
            function (response) {                   // Success Function
                $scope.userGroupTableOptions = new NgTableParams({
                    sorting: {
                        siteName: "desc",
                    }
                }, {
                    dataset: response,
                    counts: [],
                });
            },
            function (response) {
                clearDentAlerts($scope.alerts);
                reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
            }
        );
    };

    $scope.refreshUserGroups();

    $scope.openModal = function (group) {
        var uibModalInstance = $uibModal.open({
            windowClass: "",
            templateUrl: "views/modals/user-groups.html",
            controller: 'ModalUserGroupEditCtrl',
            size: null,
            resolve: {
                group: function () {
                    return group;
                },
                SpringDataRestService: function () {
                    return SpringDataRestService;
                },
                onComplete: function () {
                    return $scope.refreshUserGroups;
                },
                groupType: function () {
                    return null;
                }
            }
        });
    };
});

app.controller('ModalUserGroupEditCtrl', function ($scope, $uibModalInstance, $http, $log, SpringDataRestService, group, groupType, onComplete) {
    $scope.onComplete = onComplete;
    $scope.alerts = [];
    if (group) {
        SpringDataRestService.get(
            {
                "resource": "userGroupsInternal",
                "id": group.id
            },
            function (response) {
                console.log(JSON.stringify(response));
                $http({
                    method: 'GET',
                    url: response._links.groupType.href
                }).then(function successCallback(response) {
                    // this callback will be called asynchronously
                    // when the response is available
                    $scope.targetEntity.groupType = response.data.id;
                });
                $scope.targetEntity = response;
            }
        );
        $scope.isNew = false;
    } else {
        $scope.isNew = true;
        $scope.targetEntity = {};
        if (groupType) {
            $scope.isGroupProvided = true;
            $scope.targetEntity.groupType = groupType.id;
        }
    }

    // Get list of group type for pulldown menu
    $scope.idList = [];
    SpringDataRestService.get(
        {"collection": "userGroupTypes"},
        function (response) {                   // Success Function
            var userGroupTypes = response._embedded.userGroupTypes;
            for (var i = 0, len = userGroupTypes.length; i < len; i++) {
                var newUserGroup = {id: userGroupTypes[i].id, name: userGroupTypes[i].name};
                $scope.idList.push(newUserGroup);
            }
        },
        function (response) {                   // Failure Function
            $scope.alerts.push(new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
        }
    );

    // Handle cancel button event
    $scope.handleCancel = function () {
        $uibModalInstance.dismiss('cancel');
    };

    $scope.handleCreate = function () {
        if ($scope.targetEntity.groupType) {
            $scope.targetEntity.groupType = getResourceUri("userGroupTypes", $scope.targetEntity.groupType);
        } else {
            $scope.targetEntity.groupType = null;
        }
        SpringDataRestService.save(
            {"collection": "userGroupsInternal"},
            $scope.targetEntity,
            function (response) {                   // Success Function
                $scope.onComplete($scope.targetEntity);
                $uibModalInstance.close($scope.targetEntity);
            },
            function (response) {
                clearDentAlerts($scope.alerts);
                reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
            }
        );
    };

    $scope.handleUpdate = function () {
        if ($scope.targetEntity.groupType) {
            $scope.targetEntity.groupType = getResourceUri("userGroupTypes", $scope.targetEntity.groupType);
        } else {
            $scope.targetEntity.groupType = null;
        }
        SpringDataRestService.update(
            {
                "collection": "userGroupsInternal",
                "id": $scope.targetEntity.id
            },
            $scope.targetEntity,
            function (response) {                   // Success Function
                $scope.onComplete($scope.targetEntity);
                $uibModalInstance.close($scope.targetEntity);
            },
            function (response) {
                clearDentAlerts($scope.alerts);
                reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
            }
        );
    };

    $scope.handleDelete = function () {
        SpringDataRestService.delete(
            {
                "resource": "userGroupsInternal",
                "id": $scope.targetEntity.id
            },
            function (response) {                   // Success Function
                $scope.onComplete($scope.targetEntity);
                $uibModalInstance.close($scope.targetEntity);
            },
            function (response) {                   // Failure Function
                clearDentAlerts($scope.alerts);
                reportDentAlert($scope.alerts, new DentAlert(AlertType.ERROR, generateAlertMessage(response)));
            }
        );
    };

});

Answer 1

Поскольку вы используете angularjs, вы можете написать что-то подобное в своем контроллере, когда вызывается ваш всплывающий код.

var name = $window.document.getElementById('name');
name.focus();