Присоединение прослушивателей событий при использовании Углового UI-маршрутизатора

Question

Я использую Angular 1.4.5 с Angular Ui Router, и для форматирования текста я пытаюсь получить addEventListener для выполнения функции, когда текстовое поле blur ed. Однако проблема, с которой я столкнулся, заключается в том, что в состоянии загрузки элемент, который я пытаюсь найти, пока не существует, потому что он не существует на загружаемом шаблоне, поэтому он никогда не прикреплялся к элементу

Помимо редактирования каждого шаблона, так что он загружает initEventListeners() или вручную добавляет onblur к каждому элементу по мере необходимости, есть ли (предпочтительно ванильный) способ добавления прослушивателей событий при изменении маршрутов или способа запуска функции при навигации между состояниями ?

Вот соответствующие фрагменты JS, остальные правильно нанизать вместе с UI-маршрутизатор и Угловое

---

function initEventListeners() { 
'use strict' 
    if (document.contains(document.getElementById('phone'))) { 
     document.getElementById('phone').addEventListener('blur', formatPhoneNumber); 
    } 
} 

window.onload = function() { 
    'use strict'; 
    runTicker(); 
    setTimeout(cycleFooterText, 4000); 
    initEventListeners(); 
} 

Answer 1

Использование угловой директивы для использования DOM манипуляции или добавить слушателя. Ваша директива будет инициализирована только тогда, когда ваше состояние загружено, поэтому вам не нужно беспокоиться о выборе/загрузке dom, и в любом случае это лучше всего.

Exemple из директивы, которые добавляют тест на ваш входное значение на размытия:

HTML часть:

<input type="text" add-test> 

JS часть:

angular 
    .module('testApp', []) // init angular 
    .directive('addTest', function() { 

     // directive options 
     var directive = { 
      restrict: 'A', 
      compile: compile 
     }; 

     return directive; 

     // use compile instead of link because you don't need to change the listener on scope change 
     function compile(elem, attr) { 

      var input = elem[0]; 

      input.addEventListener('blur', formatPhone); 

      function formatPhone(e) { 
       input.value += 'test'; 
      } 

     } 

}); 

проверить эту скрипку: https://jsfiddle.net/kc6pofdz/1/

И это руководство, если вы хотите узнать больше о директивах: https://www.sitepoint.com/practical-guide-angularjs-directives/

Answer 2

Я не пошел бы с ванильным подходом здесь просто потому, что это именно то, что угловая директивы для. Если вы создадите настраиваемую директиву и привяжите ее к вашим #phone элементам, функциональность размытия будет автоматически прикреплена к вашим элементам.

Но, вы упомянули, не желая изменять любого из ваших шаблонов, так что я мог бы рекомендовать в этом случае вызова метода initEventListeners внутри $viewContentLoaded обратного вызова (Документы https://github.com/angular-ui/ui-router/wiki#view-load-events)

Внутри контроллера для шаблон с <input id="phone"> элементами

$scope.$on('$viewContentLoaded', 
function(event){ initEventListeners(); });