將焦點設置爲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內的角元素

回答

相關問題