Select Text in Textbox After Showing Input Element via Controller

Question

I'm looking for an AngularJS-friendly way to show an input box and select the text within the input. I've tried using the controller to add the logic, this is what I have so far:

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

So at this point, I'm able to show the input box but have been unable to actually select the text within the input box in order to emphasize that the user needs to change the contents within the box.

Sidenote: I'm newer to AngularJS and, coming from a jQuery background, I of course tried using focus() and select() on the element to no avail.

Any ideas would be appreciated!

Answer 1

Thanks for your help Silvinus... I used a combination of your answer (using the link instead of the controller and using .setSelectionRange()) along with How to set focus on input field? post to come up with this final solution:

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

This solution allowed me to use the same conditional for showing as for focusing and selecting.

Answer 2

You can get the input element from link directive. Add this function into directive:

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

And in your controller you can call selectText function :

scope.selectText();