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
– Aleksey Solovey, Commented Mar 26, 2018 at 14:39
this code won't run. angular.module('simpleLiveApp' <-- missing ) here — lealceldeiro
– lealceldeiro, Commented Mar 26, 2018 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 and the ng-class directive in the HTML of the component. For more information, see “Thinking in AngularJS” if I have a jQuery background. — georgeawg
– georgeawg, Commented Mar 26, 2018 at 17:05

Yftach · Accepted Answer · 2018-03-26 14:46:27Z

0

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

answered Mar 26, 2018 at 14:46

Yftach

7525 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use JQuery in AngularJS Directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related