Angular 应用程序中的 Javascript 文件

标签 javascript jquery angularjs

我有一个我自己编写的使用 jQuery 的自定义验证文件。它正在我网站上的几个页面中使用。
现在我需要在我网站的 Angular 应用程序部分使用它。我想包含这个文件,它应该以同样的方式工作。我无法将该文件更改为指令或其他 Angular 文件,因为它正在我网站的其他部分使用。
该验证器的工作原理是向输入添加类,jquery 监视这些元素并在操作发生后进行验证。
HTML:angularview.html

<input type="text" ng-model="vm.Email" name="email" class="required pattern" pattern_type="email" />

Javascript: formvalidation.js

$('.required, .pattern').on('blur', function () {
    if ($(this).hasClass('required') && !$(this).val()) {
        addError(this, 'required');
        return;
    }
    if ($(this).hasClass('pattern') && !isValidInput($(this).attr('pattern-type'), $(this).val())) {
        addError(this, 'invalid');
        return;
    }
});

问题:

如何让这个 javascript 文件在我的 Angular View 中运行?
编辑:
我会尽量说得更清楚。
不是 jquery 插件。这是我自己的 javascript 文件,它使用 jquery 工作。我观察具有特定类名称的输入,并在更改时调用页面上的函数进行验证(请参阅示例)。 我将如何在指令中使用它,或者是否有一种方法可以通过向我的输入添加正确的类来调用此文件中的函数?

最佳答案

您的方法可能不属于 Angular 的最佳实践。但我会给出你需要的答案。

您可以非常简单地通过脚本标记包含您的文件。也许您应该在 body 末尾执行此操作,以确保当您的 jquery 尝试绑定(bind)事件时加载 DOM。

Angular 不会阻止其他脚本的执行。您只需确保两个不同的系统不会尝试向 DOM 元素添加相同的事件监听器。

此外,将 Jquery 代码包装在一个函数中以防止它乱七八糟地占用全局空间也是一个好主意。这种函数的另一个优点是,当新 View 动态添加到 DOM 时,您可以手动执行它。

关于Angular 应用程序中的 Javascript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37662102/

相关文章:

javascript - 什么时候需要重新初始化 jQuery 元素

javascript - 如何从angularjs中的选择框获取选定的值

javascript - 表单数据不再起作用

javascript - 如何在 Canvas 中找到填充文本的起点和终点

javascript - 如何根据值的小数点更改 .toFixed()?

javascript - 在kendoeditor中禁用复制粘贴

javascript - 使用 href 传递请求参数,但它们在请求中不可见(使 href Post 而不是 Get)

javascript - Angularjs:调用 iframe 中的其他范围

javascript - Jquery 切换,如果禁用 javascript,则将用户带到页面

javascript - 如何使用 phantomjs 在 JS 事件后获取更新的页面内容?