javascript - scope.$watch() 在输入键按下或 location.path 工作后未触发

Question

我在使用 angular js 时遇到了一个奇怪的问题。让我解释一下...

我正在使用 scope.watch 来观察文本字段中的文本变化 (searchloco)

<input class="typeahead"  ng-model="searchloco" data="{{varu}}" search-bar   type="text"> 

我也在使用 keydown 函数来检测回车键按下，我需要的是更改位置。回车键按下时的路径。

但是当我键入任何键(不是输入)时它工作正常，即它正在 watch 中获取文本更新以及 keydown 功能也工作正常。当我按下 Enter 键时，按键事件会触发但 watch 循环不起作用对于这个键，语句“Location.path("/") 都不起作用，它就在 if 语句下面，它确认它是一个 'enter' 键，直到或除非我键入另一个键 (a-z)。

 element.on( 'keydown' , function (e){
            console.log("=== key down pressed === ",e);
            if(e.which == 13){
                location.path('/search/');
                 ...
                 ...

不确定我是否可以解释这个问题以便于理解，所以如果我需要解释更多，请告诉我。

Answer 1

您可能需要将回调中的代码包装在 $scope.$apply() 中，像这样:

element.on( 'keydown' , function (e){
    $scope.$apply(function () {
        console.log("=== key down pressed === ",e);
        if (e.which == 13){
            location.path('/search/');
        }
    });
});

ng-keydown

然而，建议的“Angular 方式”是使用 ng-keydown指令而不是执行 jQuery 样式的 element.on()。

HTML:

<input class="typeahead" ng-keydown="keypress" ng-model="searchloco" data="{{varu}}" search-bar type="text">

JavaScript:

$scope.keypress = function ($event){
     console.log("=== key down pressed === ", $event);
     if ($event.which == 13){
         location.path('/search/');
     }
});

ng-提交

理想情况下，您可能希望将输入字段包装在一个表单中，然后处理 ng-submit .这应该以较少平台依赖的方式处理回车键。

<form ng-submit="go">
    <input class="typeahead" ng-model="searchloco" data="{{varu}}" search-bar type="text">
</form>

JavaScript:

$scope.go = function (){
     location.path('/search/');
});