How to call a JQuery event within AngularJS function

Question

Assuming validation is successful, how do i then call this Jquery event...

<script>
    $('#login').click(function() {
      //blah blah blah...
    });
</script>

From this AngularJS function

<script>
// create angular app
    var validationApp = angular.module('validationApp', []);

    // create angular controller
    validationApp.controller('mainController', function($scope) {

        // function to submit the form after all validation has occurred            
        $scope.submitForm = function() {

            // check to make sure the form is completely valid
            if ($scope.userForm.$valid) {
                // Call my Jquery function here
            }

        };

    });
</script>

In short: Don't. Bind an `ng-click` attribute to your login button instead. EDIT: https://docs.angularjs.org/api/ng/directive/ngClick — Fissio, Feb 02 '17 at 10:27

score 0 · Accepted Answer · answered Feb 02 '17 at 10:28

0

jQuery and AngularJS can work together but it is not good practice. You could use the built-in AngularJS ng-click to fire the onClick event and apply a function to it as follows:

<div id="login" ng-click="loginScriptToRunOnClick()"> My Login Div </div>

answered Feb 02 '17 at 10:28

404answernotfound

763
7
20

score 0 · Answer 2 · edited May 23 '17 at 12:01

As suggested in other answers while AngularJS and jQuery can work together, what you are trying to does not seem like a good practice. The best way to this would be define a separate function inside your controller and then call it from the validation.

    <script>
    // create angular app
    var validationApp = angular.module('validationApp', []);

    // create angular controller
    validationApp.controller('mainController', function($scope) {
        var vm = this;
        vm.loginClick = function () {
              //blah blah blah...
        }
        // function to submit the form after all validation has occurred            
        $scope.submitForm = function() {

            // check to make sure the form is completely valid
            if ($scope.userForm.$valid) {
                vm.loginClick();
            }

        };

    });
</script>

If you really must call the jquery function (e.g. because it coming from another component that you don't control) then there is an elegant way of doing this as suggested in this link how can i trigger the click event of another element in ng-click using angularjs?

How to call a JQuery event within AngularJS function

2 Answers2