Question

我想将值从vm.foo复制到vm.bar（有效），然后将焦点设置为vm.bar（这不起作用）。

<input type="text" ng-model="vm.foo" id="foo" >
<button ng-click="vm.baa=vm.foo; angular.element('#bar').focus();"></button>

<input type="text" ng-model="vm.bar" id="bar" >

为什么angular.element('#bar').focus()在这种情况下不起作用？

Answer 1

使用自定义指令发出事件。

app.directive('focusOn', () => {
   return (scope, elem, attr) => {
      scope.$on(attr.focusOn, (e) => {
          elem[0].focus();
      });
   };
});

用法：

<input type="text" ng-model="vm.foo">

<button ng-click="vm.baa=vm.foo; vm.changeFocus();"></button>

<input type="text" ng-model="vm.bar" focus-on="myFocusEvent">

然后在你的控制器中

vm.changeFocus = () => {
    $scope.$broadcast('myFocusEvent');
};

请注意，我使用的是箭头函数而不是命名函数

Answer 2

我发现了Accessing Dom elements in Angular

所以我们的情况就是

<button ng-click="vm.baa=vm.foo; angular.element(document.querySelector('#bar')).focus();"></button>

我想知道这是否能解决您的问题。实际上我会把它改成

ng-click="vm.baa=vm.foo; setFocus();"

并在控制器中

vm.setFocus = function() {
    angular.element(document.querySelector('#bar'));
}

将焦点设置为ng-click内的角元素

2 个答案: