How to write jquery code in Angularjs?

Question

Hi I am developing Website in angularjs and i am doing Registration page.I am trying to implement validation(Jquery plugin). I have imported required css and js files. Below is my html code.

 <input class="form-control validate[required] text-input" type="text" name="LastName" placeholder="{{ 'Last Name' | translate }}" ng-model="Lname">

Below is my Registration controller.

(function () {
    angular.module('RoslpApp').controller('MainRegistration', ['$rootScope', '$translatePartialLoader', '$translate', 'cfg', function ($rootScope, $translatePartialLoader, $translate, cfg) {

        $translatePartialLoader.addPart('Registration');
        $translate.refresh();
        $translate.use('de_AR');
    }]);
})();

To implement validation i want to write below code.

<script type="text/javascript">
        jQuery(document).ready(function () {
            // binds form submission and fields to the validation engine
            jQuery("#formID").validationEngine();
            $("formID").attr('autocomplete', 'off');

        });
    </script>

May I get some help where to write jquery code? Any help would be appreciated. Thank you.

You should have a look at: http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angularjs — VTr, Apr 10 '17 at 07:54
`angular.element()` is the answer. But why you need use it? >`I am trying to implement validation(Jquery plugin)`. angular boostrap helps to implement validation. then why you go to jquery? — Ramesh Rajendran, Apr 10 '17 at 07:59

score 1 · Accepted Answer · answered Apr 10 '17 at 07:47

angular.element() is the correct way to select the elements in angularjs.

But you can simply write the while code in your controller.

So just put the whole code from $(document).ready() to your controller and it will work.

And as far as the form validation is concerned, you can use Angularjs Form Validation.

You can refer Angular Form Properties $valid, $invalid, $pristine, $dirty at the link below.

https://scotch.io/tutorials/angularjs-form-validation

score 1 · Answer 2 · answered Apr 10 '17 at 07:50

You can write your jquery code like this in angularjs

// binds form submission and fields to the validation engine
    angular.element(document.getElementById("formID")).validationEngine();
    angular.element(document.getElementById("formID")).attr('autocomplete', 'off');

But that's really wrong way to implement validations, as angular have built in features to handle validations. please refer this link https://docs.angularjs.org/guide/forms

How to write jquery code in Angularjs?

2 Answers2