How to use JQuery in AngularJS Directive

Question

'use strict';
angular.module('simpleLiveApp'
.directive('cellar2Sidebar', ['$location', function () {
return {
templateUrl: './js/app/directives/sidebar/cellar2Sidebar.html',
restrict: 'E',
replace: true } }]);

I am working on a project and i want on the Directive above to add this JQuery code:

$( document ).ready(function() {
    $(".navbar-toggle").click(function(){
            $(".fa").toggleClass("fa-indent fa-outdent");
        });
});

don't use jQuery with angularjs; directives already use jQLite — Aleksey Solovey, Mar 26 '18 at 14:39
this code won't run. `angular.module('simpleLiveApp'` <-- missing `)` here — lealceldeiro, Mar 26 '18 at 14:45
That snippet of jQuery code does not translate well to a directive. Instead describe what you want the `cellar2Sidebar` component to do. Implement it by using the [`ng-click` directive](https://docs.angularjs.org/api/ng/directive/ngClick) and the [`ng-class` directive](https://docs.angularjs.org/api/ng/directive/ngClass) in the HTML of the component. For more information, see [“Thinking in AngularJS” if I have a jQuery background](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). — georgeawg, Mar 26 '18 at 17:05

score 0 · Accepted Answer · answered Mar 26 '18 at 14:46

Angular has a builtin service called $document. it is a lite version of jQuery called jQLite.

which contains .ready https://docs.angularjs.org/api/ng/function/angular.element

or if you have a new version of angular/ want to support one (deprecated, use angular.element(callback) instead of angular.element(document).ready(callback))

from the documentation...

How to use JQuery in AngularJS Directive

1 Answers1