1

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".

2
  • 2
    You haven't loaded jQuery on page
    – Tushar
    Jun 1, 2015 at 12:26
  • put this in your <head> </head> tags: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    – Jeremy C.
    Jun 1, 2015 at 12:26

4 Answers 4

9

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."

1
  • 1
    for the angular way +1, it is important to do stuff properly :)
    – Kop4lyf
    Jun 1, 2015 at 12:32
0

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.

0

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/

0

Error: $ is not defined

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

1
  • please include some more information on how to include jquery properly
    – oli_obk
    Jun 1, 2015 at 13:42

Not the answer you're looking for? Browse other questions tagged or ask your own question.