Question

我正在尝试重新创建与myspace.com相同的功能。基本上他们有一个搜索模式，一旦你开始在页面上的任何地方打字（任何按键），它就会自动出现。

我在此plnkr http://plnkr.co/edit/Cw6isK?p=preview

中有代码

我无法让它发挥作用。本质上我要做的是制作一个监听$ document上的按键事件的指令。然后，只要它选择了一个按键，就会打开带有搜索框的quickSearch模式，以便用户可以继续键入他/她的搜索查询。

问题是我无法让它发挥作用。我无法找到将按键绑定/链接到指令搜索输入框的方法。

app.directive('quickSearch', function($timeout, $document) {
return {
restrict: 'AE',
templateUrl: 'quickSearch.html',
scope: {
  selected: '=',
  isOpen: '@'
},
link: function(scope, elem, attrs) {
  var arr = [];
  $document.bind('keyup', function(e) {
    scope.selected.isOpen = true;
    //here i'm trying to link/bind the keypresses to the scope, but not sure if this is a good way of doing it
    scope.selected.query += e.key
  });


  scope.$watch('scope.selected.isOpen', function() {
    if(scope.selected.isOpen){
    $timeout(function() {
      elem.find('input')[0].focus()
    }, 1)          
    }

  })
}
}
})

Answer 1

你几乎就在那里，你只是忘了手动绑定的DOM事件（不是ng *指令）不会自动触发新的摘要周期。所以你只需要手动启动摘要。此外，您可能需要String.fromCharCode(e.keyCode);而非e.key之类的内容，并在peypress事件中执行此操作：

$document.bind('keypress', function(e) {
  scope.selected.isOpen = true;
  scope.selected.query += String.fromCharCode(e.keyCode);
  scope.$apply();
});

演示： http://plnkr.co/edit/xJoWvlTXxO94Ntgx2uy8?p=info

创建出现在keypress上的Angular模态指令

1 个答案: