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