AngularJS ng-keydown директива работает только для <input> контекста?

Я довольно новичок в AngularJS, но до сих пор нашел это по-своему. Для моего текущего проекта мне нужны функциональные клавиши и я рад видеть, что он поддерживается с момента выпуска версии 1.1.2.AngularJS ng-keydown директива работает только для <input> контекста?

Директива ng-keydown (http://code.angularjs.org/1.1.3/docs/api/ng.directive:ngKeydown) работает так, как ожидалось, для типов ввода, но не подходит для любого другого контекста, такого как div и т. Д., Что кажется странным, если в документации указано иное.

Вот минимальный пример (http://jsfiddle.net/TdXWW/12/) рабочий соответственно не работает:

<input ng-keydown="keypress($event)"> 
<div ng-keydown="keypress($event)">

Примечания: Я знаю, что это может быть обработано с простым JQuery (http://www.mkyong.com/jquery/how-to-check-if-an-enter-key-is-pressed-with-jquery/), но я предпочитаю, чтобы понять, как бороться с ним в AngularJS.

источник

2013-03-29 Lukas N.P. Egger

ДИВ, что не 'contenteditable' не вызывает фокус, когда clciked так нет активного элемента связывать' keypress' с. Попробуйте использовать ту же самую вещь, используя jQuery или собственный скрипт. Может привязывать событие к документу и проверять, что цель не является входным. Не уверен, что ваш вариант использования – charlietfl

Комментарий charlietfl очистил вещи и привязал событие к $ (документу), работало как и ожидалось! Отвлечь сообщение: документация AngularJS не является исчерпывающей, т. Е. Требует базовых знаний.

источник

2013-03-29 18:04:39

Спасибо! Для того, чтобы обернуть это я получил эту работу путем, инъекционное $ документа в моей директиве, то:

MyApp.directive('myDirective', function($document) { 
return { 
... 
$document.keydown(function(e){ 
    console.log(e) 
}) 
}

источник

2013-06-12 09:09:25

Мне нужно было сделать $ ($ document) .keydown (... чтобы заставить это работать. Я полагаю, что jQuery-lite не имеет функции keydown? – Crashthatch

@Crashthatch Используйте '.on («keydown») 'для jQuery-lite. –

У меня была та же проблема, и был в состоянии исправить это, следуя этой простой совет, представленные в этом комментарии: https://stackoverflow.com/a/1718035/80264

Вам необходимо предоставить div tabindex, чтобы он мог получать фокус.

<div id="testdiv" tabindex="0"></div>

источник

2013-08-16 15:52:33

хороший очень хороший бит информации. Единственная проблема заключается в том, когда он становится фокусом, по крайней мере, в FireFox, я получаю большую красную рамку вокруг элемента. – Gurnard

Я думаю, это из-за way firefox обрабатывает проверку формы html по умолчанию? Смотрите, если это поможет: http://stackoverflow.com/questions/3809146/firefox-4-required-input-form-red-border-outline –

Спасибо за ссылку. В конце Я добавил ng-keydown и ng-keyup к элементу body, который затем вызвал функции в контроллере тела, а затем установил переменную, но мог также транслироваться на другие контроллеры. Очень хорошо работает для моих нужд (выбор данных со сдвигом). ответ – Gurnard

Это было так, как я получил это работает, в конце концов.

Добавить нг-KeyUp и нг-KeyDown к элементу тела:

<html ng-app="myApp" ng-controller="MainCtrl"> 
..... 
    <body ng-keydown="keyPress($event);" ng-keyup="keyRelease($event);">

Тогда Funcitons в моих сделках с контроллером случае вызывающего event.which, чтобы получить код ключа (в моей реализации я поставил вар к rootScope, но вы можете также транслировать на другие контроллеры)

 $scope.keyPress = function(eve){ 
     if(eve.which === 16){//shift 
      //$rootScope.$broadcast('doShift'); 
      $rootScope.shiftOn = true; 
     } 
    }

источник

2014-03-07 09:23:11 Gurnard

angular.module('app').directive('executeOnEnter', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, el, attrs, $rootScope) {      
      $('body').on('keypress', function (evt) { 
       if (evt.keyCode === 13) { 
        el.trigger('click', function() { 
        }); 
       }    
      }) 

     }, 
     controller: function ($rootScope) { 
      function removeEvent() { 
       $("body").unbind("keypress"); 
      } 
      $rootScope.$on('$stateChangeStart', removeEvent); 
     } 
    } 
})

источник

2016-05-24 07:55:14 vvn050

Вы связываете нажатия на тело.Таким образом, связывание продолжает слово событие ваше мнение изменилось или когда вам не нужно, что привязка к другим представлениям. –

, если вы обеспокоены этим, я отредактировал ответ. Конечно, это может удалить что-то u, прикрепленное ранее к телу (при нажатии клавиши), поэтому вы можете позаботиться об этом. – vvn050

AngularJS ng-keydown директива работает только для <input> контекста?

ответ

Смежные вопросы