Question

我在我的应用中使用AngularUI modal。模态包含预先填充了某个值的输入字段。请求：当模态打开时，应选择该输入字段中的文本。

我已经为选定的文本输入制定了指令，而且我根据this答案点击输入时选择了所有文本，这很好，但是当打开模态时我需要该功能。

我在other thread中看到模态实例已经“打开”了，但在该块中我无法访问输入。

模态对话框：

var modalInstance = $modal.open({

templateUrl: 'app/main/templates/dialogs/share-dialog.tpl.html',
controller: function ModalCtrl($scope, $modalInstance, item) {

    $scope.ok = function () {

        $modalInstance.dismiss('cancel');
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

},
resolve: {
    item: function () {
        return item;
    }
}
});

带有select指令的模板部分：

<input ng-model="shareLink" type="text" class="form-control" id="share" selected-text >

选定的文字指令：

var SelectedText = function () {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.on('click', function () {
                this.select();
            });
        }
    };
};

return SelectedText;

Answer 1

我认为以下指令将解决您的问题：

app.directive("selectImmediately", function($timeout) {
  return {
    restrict: "A",
    link: function(scope, iElement) {
      $timeout(function() { // Using timeout to let template to be appended to DOM prior to select action.
        iElement[0].select()
     });
    }
  }
});

用法：

<input ng-model="name" type="text" class="form-control" id="share" select-immediately >

可以看到plnkr中的完整示例here。您可以在任何地方使用此指令。

打开时，在AngularUI模式的输入字段中选择文本

1 个答案: