директивы и межэлементная связь

Question

Я создал следующую простую директиву для перенаправления ввода событий нажатия клавиш.

Я думаю, что лучше использовать emit сообщение для другой директивы, которая обрабатывает событие keypress, а не использует идентификатор jQuery, как я здесь.

В соответствии с Угловой философией, что лучше всего подходит при взаимодействии элемента с элементом? Зачем?

благодаря

========================================================= 
.directive('redirectEnter',function() { 
    return { 
     restrict : 'A', 
     link : function($scope,$element,$attr) { 
      $element.keypress(function($event) { 
       if($event.keyCode == '13') { 
        $($attr.redirectEnter).click(); 
        $event.stopPropagation(); 
        $event.preventDefault(); 
       } 
      }); 
     } 
    } 
}) 
========================================================= 
<a redirect-enter="#apply">Redirect enter example</a> 
<button id="apply">Apply</button> 
========================================================= 

Answer 1

Ваш пример HTML не имеет никакой логики проводную для кнопочного элемента с помощью ng-click и т.д., так что ради примера, давайте представим себе представление, как это:

<input ng-model="model.something"> 
<button ng-click="submit()"> 

(Помните, что ваши элементы DOM должны быть привязаны к логике с помощью директив или области видимости контроллера. Использование $("#apply").click(...) не-нет!)

в в этом примере легко сказать, что мы хотим, чтобы элемент input «набирал» нажатия клавиш и «перенаправлял» их на кнопку. Но что мы действительно хотите ввести «ввод» в input, чтобы сделать это действие, которое в противном случае сыграло бы кнопку - в этом случае, вызвав метод submit в области.

Вот директива, которая принимает выражение для оценки как его атрибута redirect-enter (я бы назвал его onEnter или что-то в этом роде) и оценивает выражение.

<input ng-model="model.something" redirect-enter="submit()"> 
<button ng-click="submit()">Submit</button> 

Вот директива, которая делает эту работу:

app.directive('redirectEnter', function() { 
    return { 
    restrict : 'A', 
    link : function($scope,$element,$attr) { 
     $element.keypress(function($event) { 
     if($event.keyCode == '13') { 
      $scope.$eval($attr.redirectEnter); 
      $event.stopPropagation(); 
      $event.preventDefault(); 
     } 
     }); 
    } 
    } 
}); 

Вот пример на jsFiddle: http://jsfiddle.net/BinaryMuse/HgD9y/

Обратите внимание, что, если вы хотите такое же поведение на элементе связи, вы следует использовать ng-click. не

Если вы боретесь с сохранением себя от не с помощью простых селекторов JQuery в вашей угловой коде (как нет-нет, я упоминал в начале этого ответа), рассмотреть этот совет от Angular FAQ:

Не пытайтесь использовать jQuery для изменения DOM в контроллерах. В самом деле. Это включает в себя добавление элементов, удаление элементов, извлечение их содержимого, их отображение и скрытие. Используйте встроенные директивы или, если необходимо, самостоятельно создайте свои собственные манипуляции с DOM. См. Ниже о дублирующих функциях.

Если вы пытаетесь нарушить привычку, подумайте об удалении jQuery из вашего приложения. В самом деле. Угловой имеет сервис $ http и мощные директивы, которые делают его почти всегда ненужным. Укомплектованный jqlite укомплектован некоторыми функциями, наиболее часто используемыми в написании угловых директив, особенно связанных с событиями.