Question

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

对于任何查询：我希望有一个如下所示的唯一地址：

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

以下是我要实施的内容：

因此，当我在搜索字段中键入查询时，浏览器地址栏的URL应根据查询生动地更改。我正在使用angular-ui-router进行路由，下面我已经包含了我正在使用但不能正常工作的代码。

以下是字典部分的路由代码：

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

这是字典的控制器：

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 设置为不触发更改，则应该能够键入整个搜索查询并且不会失去焦点，直到您离开搜索框：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/nav_menu">
        <item
            android:id="@+id/nav_item_1"
            android:icon="@drawable/ic_nav_item_1"
            android:title="Nav Item 1" />
        <item
            android:id="@+id/nav_item_2"
            android:icon="@drawable/ic_nav_item_2"
            android:title="Nav Item 2" />
        <item
            android:id="@+id/nav_item_3"
            android:icon="@drawable/ic_nav_item_3"
            android:title="Nav Item 3" />
        <item
            android:id="@+id/nav_item_4"
            android:icon="@drawable/ic_nav_item_4"
            android:title="Nav Item 4" />
    </group>
    <group android:id="@+id/nav_footer">
        <item
            android:id="@+id/nav_footer_1"
            android:icon="@drawable/ic_footer_item_1"
            android:title="Footer Item 1" />
        <item
            android:id="@+id/nav_footer_2"
            android:icon="@drawable/ic_footer_item_2"
            android:title="Footer Item 2" />
    </group>
</menu>

Angular / HTML5更改页面状态，重点关注输入

1 个答案: