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

我想将vm.foo的值复制到vm.bar（即有效），然后将焦点设置为vm.bar（这不起作用）。将焦点设置为ng-click内的角元素

<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()为什么在这种情况下不起作用？

来源

2017-07-30 torbenrudgaard

我没有”知道'angular.element（'＃bar'）;'wa是一种访问DOM元素的可行方法。你确定'angular.element'可以访问ID为'bar'的元素吗？ –

@JarekKulikowski如果jQuery在angularjs之前加载，那么是的，这是可能的 –

在这种情况下，也许可以用'$'替换'angular.element'。 –

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

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'); 
};

请注意，我用箭头的功能而不是命名功能

来源

2017-07-30 23:02:46 mattias

感谢Mattias，这是做到这一点的正确方法。 – torbenrudgaard

我发现这个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')); 
}

来源

2017-07-30 22:24:35

对不起 - 根本没有效果。即使我把它放到控制器中，它也什么也不做。 – torbenrudgaard

我发现我需要使用'setTimeout'来做'focus'，否则它也不适用于我;我认为它必须在控制器中完成。 –

我想你可能是对的，我会再试一次。 – torbenrudgaard

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

回答

相关问题