Question

我正在尝试从selectbox中选择选项后将注意力集中在输入类型文本上。选择选项后，它将输入聚焦为纳秒，然后再次聚焦于选择框。

这是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错误，因为如果我们使用标准选择，它就可以正常工作了。 （我认为应该创建github issue）

也就是说，你可以使用uggly解决方法来解决它，直到bug被修复：当select更改时，附上一个指令以手动关注输入（使用$timeout）。

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

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

控制器：更改选择时广播事件。

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

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

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

我已经把你的jdsfiddle分开了。 Here 您可以看到它正常运作。

希望有所帮助

在AngularJS中从选择框中选择选项后，请关注输入文本

1 个答案: