JavaScript 的 .select() 方法仅在第二次尝试时触发

Question

使用 Angular，我正在尝试实现一种通过单击“编辑”按钮来更改值的方法，即当单击此按钮时，会在文本上显示输入，而当单击“保存”时单击按钮，输入的不透明度变为0，并应用模型的值。

我创建了一个 jsfiddle 以使我的问题更加直观。 JSFIDDLE DEMO

问题如下：单击“编辑”按钮后，我想选择文本以使用户可以清楚地看到它现在可以更改。我是这样做的：

var input = angular.element(document.querySelector('input'))[0];
input.focus();
input.select();

唯一的问题是input.select() 仅在第二次尝试时有效。您可以在演示中看到它。我对此没有任何合理的解释。我需要提一下，我正在编写的这个应用程序是为 Electron 编写的，这意味着它只会在 Chromium 中启动，所以我不需要跨浏览器支持。

当第一次点击“编辑”按钮时，不会发生选择：

但是当我点击“保存”然后再次点击“编辑”时，一切正常：

任何想法将不胜感激！

Answer 1

使用$timeout，会触发摘要循环

var app = angular.module('app', []);

app.controller('mainController', function($timeout,$scope) {
  var vm = this;
  vm.address = '127.0.0.1';
  vm.name = 'anabelbreakfasts';
  vm.editing = {
    address: false
  };
  vm.temp = {
    address: null
  };

  vm.changeClick = function(element) {
    vm.editing[element] = !vm.editing[element];
    if (vm.editing[element]) {
      vm.temp[element] = vm[element];
      var input = angular.element(document.querySelector('div.row.' + element + ' input'))[0];
      $timeout(function(){
        input.focus(); 
        input.select();
      });
    } else {
      vm[element] = vm.temp[element];
    }
  };
});

Fiddle

Answer 2

使用 setTimeout：

setTimeout(function(){
    input.select();
}, 0)

另外，input.focus() 有点多余