Question

我的设置很复杂。我的应用程序由一组“规则”驱动，这些规则决定了用户界面是什么。通过循环遍历规则并创建单个下拉列表来呈现UI。最初，一切都正确呈现。但是，一旦用户对UI进行更改，其他规则可能会受到影响。在我的应用程序中，进行了api调用，然后返回一组修改过的规则。在附带的plunker中，我简化了一些事情，只应用了一组新的规则，这会导致页面重新渲染。问题是我的用户希望能够在页面上的所有条目之间进行选项卡并进行更改。但是，一旦页面被重新渲染，当前选择的页面元素现在就没有任何焦点。我试图通过跟踪一个常见的ID来重点关注正确的元素，但无济于事。

使用其中任何一种似乎都不起作用。

var el = document.getElementById(focusId); el.focus(); angular.element(el).focus();

我也尝试在我想要关注的下拉列表中使用autofocus属性，但这也不起作用。我正在使用angularjs 1.2。任何想法都表示赞赏。

http://plnkr.co/edit/ND9PKqULIOlixWR4XChN?p=preview

Answer 1

如果要从角度动态地将自动焦点分配给DOM上的元素，可以使用：

var myEl = angular.element(document.querySelector('select'));
myEl.attr('autofocus',"attr val");

您还可以传递ID：angular.element(document.querySelector('#focusId'));

您可以查看here以获得更多帮助的先前答案！

-Cheers！

Answer 2

问题在于，您在focus事件完成之前尝试blur元素。因此，您需要在focus事件后执行blur代码。异步执行焦点代码可以解决问题。您可以使用setTimeout或$timeout。

setTimeout(function(){
    angular.element('#'+focusId).focus();

    /* //or 
    var el = document.getElementById(focusId);
    el.focus();
    */

});

或

$timeout(function(){
    angular.element('#'+focusId).focus();

    /* //or 
    var el = document.getElementById(focusId);
    el.focus();
    */

});

如果您使用的是第二个代码，请不要忘记将$timeout注入您的控制器。希望这会有所帮助：）

当整个页面发生变化时，如何将焦点返回到元素？

2 个答案: