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

Question

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

这是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

正如 cmets 中提到的，这可能是一个 angular-material 错误，因为如果我们使用标准选择，它就可以正常工作。 （我认为应该创建一个github issue）

也就是说，在修复错误之前，您可以制定一个丑陋的解决方法来解决它：附加一个指令以在选择更改时手动关注输入（使用 $timeout）。

指令：注意超时。这需要相当长的时间......（它的工作时间为 250 毫秒）：

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

controller ：在选择改变时广播事件。

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

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

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

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

希望对你有帮助