How to call the jQuery from AngularJS

Question

I am new to AngularJS, please help me to solve this problem. How can I call the jQuery function from AngularJS.

HTML:

<div ng-controller="TestClickController">
<button ng-click="clickFunc()">Test click</button></div>

Script:

<script>
var app = angular.module('myApp', []);
app.controller('TestClickController', function($scope) {
    $scope.clickFunc = function() {
        $('#div1').html('User clicked');
    };
});
</script>

When the button is clicked, I get the error "Error: $ is not defined".

You haven't loaded `jQuery` on page – Tushar Jun 01 '15 at 12:26 — Tushar, Jun 01 '15 at 12:26

devqon · Answer 1 · 2015-06-01T12:40:37.233

Your error would mean that jQuery isn't included/not yet loaded.

I would recommend though if you use Angular, then use the Angular way to solve this stuff:

<div ng-controller="TestClickController">
    <button ng-click="clickFunc()">Test click</button>

    <div>
        <!-- This text will be updated when the button is clicked -->
        {{ testText }}
    </div>
</div>

Controller:

app.controller('TestClickController', function($scope) {
    $scope.testText = '';
    $scope.clickFunc = function() {
        $scope.testText = 'User clicked';
    };
});

JSFIDDLE

One of the unwritten rules of angular is: "If you need to use jQuery to do stuff, then you probably do something wrong."

for the angular way +1, it is important to do stuff properly :) — Kop4lyf, Jun 01 '15 at 12:32

BigGrecian · Answer 2 · 2015-06-01T12:33:36.453

0

Error: $ is not defined

Normally means Jquery has not been included properly....

edited Jun 01 '15 at 12:33

answered Jun 01 '15 at 12:27

BigGrecian

43
5

please include some more information on how to include jquery properly – oli_obk Jun 01 '15 at 13:42

score 0 · Answer 3 · answered Jun 01 '15 at 12:27

This is because you have not have included jquery. Otherwise this should have worked.

Also when you include jquery, you should do it before you include angular so that angular takes full advantage of presence of jquery. And you can then use angular.element instead of $.

angular.element('#div1').html('User clicked');

One more thing, when you are using jquery functions, it is advisable to do them in a service or a directive. Controller is not meant to call other libraries functions. This is just a convention which helps in better testable code.

score 0 · Answer 4 · answered Jun 01 '15 at 12:33

I did not see an ng-app, which could have been your issue. Or you have not included jQuery before Angular is bootstrapped.

<div ng-app="myApp">
    <div ng-controller="TestClickController">
       <button ng-click="clickFunc()">Test click</button>
    </div>
    <div id="div1"></div>
</div>

The JavaScript:

var app = angular.module('myApp', []);
   app.controller('TestClickController', ['$scope', function($scope) {
   $scope.clickFunc = function() {
       console.log();
       $('#div1').html('User clicked');
   };
}]);

Here is a working js fiddle:

http://jsfiddle.net/bwz9e0Ly/

How to call the jQuery from AngularJS

4 Answers4