Javascript file in Angular App

Question

I have a custom validation file using jQuery that I wrote myself. It is being used in a few pages on my site.
Now I need it on a part of my site that is an Angular app. I would like to include this file and it should work the same way. I cannot change the file to be a directive or other angular file because its being used on other parts of my site.
This validator works by adding classes to the inputs and the jquery watches those elements and validates after action occurs.
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;
    }
});

Question:

How can I get this javascript file to run in my angular view?
EDIT:
I will try to be clearer.
This is not a jquery plugin. This is my own javascript file and it works using jquery. I watch inputs with a specific class name and on changes, I call functions on the page to validate(see example). How would I use this in a directive or is there a way that the functions in this file can be called by adding the correct classes to my inputs?

You don't change your jQuery file to be a directive, you use a directive in place of wiring up the `$('.required, .pattern').on('blur' ...)` piece of it. Check out [this answer](http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angularjs) for a detailed and well documented answer to using jQuery with Angular. — Lex, Jun 06 '16 at 16:24
@lex see edits. if i can use a directive, can you show me how? — M B, Jun 06 '16 at 16:50
@MB check out [this](https://thinkster.io/a-better-way-to-learn-angularjs/basic-directive-functionality) article. It's a more comprehensive overview about directives in general, but the idea is that the initialization function of directives gets passed the element that it is assigned to. e.g. ```return function(scope, element) { element.bind("mouseenter", function(){ console.log("Mouse has entered the div"); }) }``` — Jay, Jun 06 '16 at 17:04

score 1 · Accepted Answer · answered Jun 06 '16 at 16:58

Probably your method is not among the best practices of Angular. But I will give the answer you need.

You can very simply include your file through a script tag. Probably you should do this by the end of body to make sure the DOM is loaded when your jquery tries to bind the events.

Angular doesn't block other scripts from executing. You should only make sure that two different systems are not trying to add same event listeners to the DOM elements.

Also it would be a good idea for you to wrap your Jquery code inside a function to prevent it from littering the global space. Another advantage of such a function is that you can execute it manually when the new views are added to the DOM dynamically.

Thank you. I was adding it in my _layout page and when I moved it to the bottom of the page I needed it on, it worked! — M B, Jun 06 '16 at 17:26

Javascript file in Angular App

1 Answers1