Angular UI-Routerを使用しているときにイベントリスナーをアタッチする

Question

Angular Ui RouterでAngular 1.4.5を使用しています。テキストフォーマットの理由から、テキストフィールドがblurのときに機能を実行しようとしています。私が実行している問題は、ロード状態では、ロードしようとしているテンプレートに存在しないため、見つからない要素がまだ存在しないため、要素には絶対にアタッチされません。

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要素にバインドすると、ぼかし機能が要素に自動的に関連付けられます。用コントローラ内部

：

は、しかし、あなたはあなたのテンプレートのいずれかを変更したくない言及したので、私はそのような場合にはお勧めかもしれませんが$viewContentLoadedコールバック（https://github.com/angular-ui/ui-router/wiki#view-load-eventsドキュメント）の内側にあなたのinitEventListenersメソッドを呼び出しています<input id="phone">要素

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