7

在 angularjs 我有以下内容：

app.directive('ngEnter', function () {
   return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
        if(event.which === 13) {
            scope.$apply(function (){
                scope.$eval(attrs.ngEnter);
            });

            event.preventDefault();
        }
    });
  };
});

html是：

<input type="text" ng-model="searchText" class="form-control"
                               placeholder="Search"
                               ng-enter="search($event, searchText)">

所以基本上，一旦我完成输入要搜索的文本，当我按下回车键时，我的控制器上的搜索功能就会运行。

我将如何在 Aurelia 中做到这一点？

我仍在学习它的功能，所以任何帮助将不胜感激。

4

4 回答 4

19

我认为角度 ngEnter 的替代方案是：

import {customAttribute, inject} from 'aurelia-framework';

@customAttribute('enter-press')
@inject(Element)
export class EnterPress {
    element: Element;
    value: Function;
    enterPressed: (e: KeyboardEvent) => void;

    constructor(element) {
        this.element = element;

        this.enterPressed = e => {
            let key = e.which || e.keyCode;
            if (key === 13) {
                this.value();//'this' won't be changed so you have access to you VM properties in 'called' method
            }
        };
    }

    attached() {
        this.element.addEventListener('keypress', this.enterPressed);
    }

    detached() {
        this.element.removeEventListener('keypress', this.enterPressed);
    }
}
<input type="password" enter-press.call="signIn()"/>

于 2016-07-19T14:50:02.037 回答
17

最简单的方法是将其包装input在一个form元素中并绑定到submit表单的事件。

<form role="form" submit.delegate="search()">
  <div class="form-group">
    <label for="searchText">Search:</label>
    <input type="text" value.bind="searchText" 
           class="form-control" id="searchText" 
           placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

这将为您提供与上面构建的相同的行为。我仍在努力创建一个自定义属性的示例来执行此操作，但老实说，这就是我建议您执行此特定操作的方式（在用户按下 Enter 时捕获）。

于 2015-04-17T12:53:19.367 回答
4

这似乎不支持开箱即用。虽然不完美，但我打算这样做：

  • 在我的表单顶部添加一个带有click.delegate属性的隐藏提交按钮。
  • 单击时在我的虚拟机中运行一些代码。此代码将根据我需要的任何自定义逻辑决定如何处理 enter 按键。

希望有帮助，安德鲁

编辑：

您还可以添加按键事件委托：

<input keypress.delegate="doSomething($event)" />

并将 doSomething() 定义为：

doSomething(event) {
  if(event.which == 13) {
    alert('Your code goes here!');
  }
  event.preventDefault();
}

当您有许多具有不同输入按键行为的输入时，这会更简洁一些。

于 2015-09-10T18:25:43.350 回答
3

由于默认情况keypress.delegate下keypress.trigger在<input>块中输入文本，因此您的函数必须返回 true 以避免它，如下所示：

doSomething(event) {
    if(event.which == 13) {
        console.log('Your code goes here!');
        event.preventDefault();
        return false;
    }
    return true;
}
于 2017-12-15T15:21:27.203 回答