javascript - Angular/HTML5 改变页面状态，专注于输入

Question

我目前正在使用 AngularJS 开发一个简单的在线英汉词典。因此，当您在搜索字段中键入英文单词(查询)时，应该会出现相关的中文对应词。

对于任何查询:我想要一个看起来像这样的唯一地址:

http://www.ezecdic.com/#/dictionary/{query}

这是我要实现的:

因此，当我在搜索字段中键入查询时，浏览器地址栏的 URL 应该会根据查询动态变化。我正在使用 angular-ui-router 进行路由，下面我包含了我正在使用但无法正常工作的代码。

字典部分的路由代码如下:

$stateProvider
    .state('dictionary', {
        url: '/dictionary/{query:.*}',
        templateUrl: '/static/templates/dictionary.html',
    }
)

这是字典的 Controller :

angular.module('ezdic')
    .controller('DictionaryController', function ($scope, $stateParams, $state) {
        $scope.query = $stateParams.query;

        $scope.queryChanged = function () {
            $state.go('dictionary', {'query': $scope.query});
        };

        $scope.search = function (query, page, language) {
            // ... ...
        };

        $scope.search($scope.query);
    });

这是字典的模板代码:

<div ng-controller="DictionaryController">
    <input type="search" ng-model="query" ng-change="queryChanged()" />
</div>

问题是当我在搜索字段中键入内容时，URL 发生了变化，但搜索字段失去了焦点。这使得无法继续打字。我也尝试过 history.pushState() 或 location.hash 但他们给出了同样的问题。我不确定这是否可能。我只希望字典按照我想要的方式运行。欢迎任何解决方案!

感谢您的时间和精力。

Answer 1

如果您将 ng-model-options 设置为在您离开搜索框之前不触发 ng-change，您应该能够键入整个搜索查询而不会失去焦点:

<div ng-controller="DictionaryController">
    <input type="search" ng-model="query" ng-change="queryChanged()" ng-model-options="{updateOn: 'blur'}" />
</div>