Question

我正在寻找一种AngularJS友好的方式来显示输入框并选择输入中的文本。我已经尝试使用控制器添加逻辑，这是我到目前为止：

HTML ComparisonCenterProfiles.html

<div id="saved-profiles" class="select-list" ng-cloak>
    <ul>
        <li ng-repeat="profile in profiles" ng-class="{'ellipsis': true, 'active': isActive(profile.CompSetId)}">
            <span class="save-disk" ng-click="saveActiveProfile()" ng-show="isActive(profile.CompSetId) && profile.IsDirty" style="cursor: pointer;"></span>

            <a href="javascript:;" ng-show="!forceRenameProfile || !isActive(profile.CompSetId)" ng-click="setActiveProfile(profile)">{{profile.CompSetName}}</a>

            <input type="text" ng-model="profile.CompSetName" ng-show="forceRenameProfile && isActive(profile.CompSetId)" ng-blur="saveActiveProfile()" />

        </li>
    </ul>
</div>

的Javascript

angular
.module('app')
.directive('compProfiles', ['pageMethod', function (pageMethod) {
    return {
        restrict: 'E',
        require: '^compEditor',
        controller: ['$scope', function ($scope) {
            $scope.saveActiveProfile = function () {
                if ($scope.activeProfile.CompSetName.length < 3) {
                    showAlert('Error',
                                '<strong>' + $scope.activeProfile.CompSetName + '</strong> is not a valid profile name. Your profile name must have at least 3 characters.',
                                [
                                    {
                                        text: 'OK',
                                        click: function () {
                                            $scope.forceRenameProfile = true;
                                            hideAlert($(this));
                                        }
                                    }
                                ]);
                }
                else {
                    continueSavingProfile();
                    $scope.forceRenameProfile = false;
                }
            }
        }],
        templateUrl: 'Templates/ComparisonCenterProfiles.html'
    };
}]);

所以在这一点上，我能够显示输入框但是无法在输入框中实际选择文本，以强调用户需要更改框内的内容。

旁注：我对AngularJS更新，并且来自jQuery背景，我当然尝试在元素上使用focus（）和select（）无效。

任何想法都将不胜感激！

Answer 1

您可以从link指令获取input元素。将此函数添加到指令中：

link: function(scope, element) {
   var inputElement = element.find('input');
   scope.selectText = function() {
       inputElement.setSelectionRange(0, inputElement.value.length)
   }
}

在你的控制器中你可以调用selectText函数：

scope.selectText();

Answer 2

感谢您的帮助Silvinus ...我结合您的答案（使用链接而不是控制器并使用.setSelectionRange（））和How to set focus on input field?帖子来提出最终解决方案：< / p>

<强> HTML

<input type="text" ng-show="forceRenameProfile && isActive(profile.CompSetId)" focus-me="forceRenameProfile && isActive(profile.CompSetId)" ng-model="profile.CompSetName" ng-blur="saveActiveProfile()" />

的Javascript

.directive('focusMe', function ($timeout, $parse) {
        return {
            link: function (scope, element, attrs) {
                var model = $parse(attrs.focusMe);
                scope.$watch(model, function (value) {
                    if (value) {
                        $timeout(function () {
                            element[0].focus();
                            element[0].setSelectionRange(0, element[0].value.length);
                        });
                    }
                });
            }
        };
    });

这个解决方案允许我使用相同的条件来显示和聚焦和选择。

通过Controller显示输入元素后，在文本框中选择文本

2 个答案: