从 AngularJS 的选择框中选择选项后关注输入文本

Question

我试图在 select 从 select 框中输入选项后将焦点设置在输入类型的文本上。 selecting 选项后，它会在纳秒内聚焦输入，然后再次聚焦在 select 框上。

这里是fiddle.

这是代码

    <div ng-controller="MyCtrl" layout layout-align="center center">
        <md-select ng-model="myModel" placeholder="Pick" ng-change="onChange()" md-on-open="onOpen()">
            <md-option value="0">Zero</md-option>
            <md-option value="1">One</md-option>
        </md-select>

        <input type="text" id="fc">
    </div>
<script>
    angular.module('MyApp', ['ngMaterial'])
    .controller('MyCtrl', function ($scope) {
        $scope.onChange = function() {
            document.getElementById('fc').focus();
        };

        $scope.onOpen = function() {
           document.getElementById('fc').focus();
        };
    })
</script>

Answer 1

如评论中所述，这可能是一个 angular-material 错误，因为如果我们改用标准 select 它就可以正常工作。 （我认为应该创建一个github issue）

就是说，您可以制定一个丑陋的解决方法来解决它，直到错误被修复：当 select 更改时附加一个指令以手动关注输入（使用 $timeout） .

指令：注意超时。这需要相当长的时间...（它适用于 250 毫秒）：

.directive('focus', function($timeout) {
   return function(scope, elem, attr) {
      scope.$on(attr.focus, function(e) {
        $timeout(function() {        
          elem[0].focus();         
        }, 250);
      });
   };
})

控制器: 当select改变时广播一个事件。

$scope.onChange = function() {
   $scope.$broadcast('selectChanged');
};

View：将焦点指令附加到您的输入元素：

<input type="text" id="fc" focus="selectChanged">

我已经分叉了你的 jdsfiddle。 Here 你可以看到它在工作。

希望对您有所帮助

从 AngularJS 的选择框中选择选项后关注输入文本

Focus on input text after selecting option from selectbox in AngularJS

javascript

angularjs

angularjs-material