javascript - 使用 Angular UI-Router 时附加事件监听器

Question

我将 Angular 1.4.5 与 Angular Ui 路由器一起使用，出于文本格式的原因，我正在尝试获取 addEventListener当文本字段为 blur 时执行功能编辑。然而，我遇到的问题是，在加载状态下，我试图查找的元素尚不存在，因为它不存在于加载的模板中，因此它从未附加到元素上

除了编辑每个模板以使其加载之外 initEventListeners() ，或手动添加 onblur根据需要对每个元素，是否有一种(最好是 Vanilla)方法在更改路线时添加事件监听器或在状态之间导航时触发功能的方法？

这是 JS 的相关部分，其余部分与 UI-Router 和 Angular 正确串在一起

---

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

使用 angular 指令来使用 dom 操作或添加监听器。 您的指令只会在您的状态加载时初始化，因此您不必担心 dom 选择/加载，无论如何这是最佳实践。

在 blur 上向输入值添加测试的指令示例:

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';
            }

        }

});

检查这个 fiddle :https://jsfiddle.net/kc6pofdz/1/

如果您想了解有关指令的更多信息，请阅读本指南:https://www.sitepoint.com/practical-guide-angularjs-directives/