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 for a detailed and well documented answer to using jQuery with Angular. — Lex
– Lex, Commented Jun 6, 2016 at 16:24
@lex see edits. if i can use a directive, can you show me how? — M B
– M B, Commented Jun 6, 2016 at 16:50
@MB check out this 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
– Jay, Commented Jun 6, 2016 at 17:04

Charlie · Accepted Answer · 2016-06-06 16:58:52Z

1

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.

answered Jun 6, 2016 at 16:58

Charlie

24k12 gold badges65 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M B Over a year ago

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!

Collectives™ on Stack Overflow

Javascript file in Angular App

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related