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选择/加载，无论如何它都是最好的。

在模糊处添加测试到输入值的指令的例子：

html部分：

Dim theFirstCustomer = customers[0]
Console.WriteLine(theFirstCustomer.CustomerID)

js part：

<input type="text" add-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(); });

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

2 个答案: