how to apply a jquery code in angular directive

Question

I need insert a jquery code in a angular component, this jquery was in the html so not good practice.

I tried create a new function there and insert my jquery code , the jquery it is working very well, but i don't know why, the function link is now broken and not working.

I am new using angular and js so i can't understand well , can someone help to solve this? explain what is wrong in the code and i broken the function above

Thank you.

jquery code I tried to apply

  $('#close, #menu-toggle').click(function(e) {
          e.preventDefault();
          $('#wrapper').toggleClass('toggled');
        });

angular file:

 angular.module('test').directive('leftBar', [
      'leftBarService',
      function leftBar(leftBarService) {
        'use strict';

        var
          scope = {
            onLeafNode: '='
          };

        function link($scope, $element) {
          $element.leftBar({
            speed: 1000,
            useDynamicLoading: false,
            onLeafNodeReched: $scope.onLeafNode
          });

        }

        function menu ($scope, $element){
            $('#close, #menu-toggle').click(function(e) {
            e.preventDefault();
            $('#wrapper').toggleClass('toggled');
          });
        }

        return {
          restrict: 'A',
          scope: scope,
          link: link,
          link:menu,
          templateUrl: 'app/test/leftBar/leftBar.html'
        };
      }

    ]);

why you have got 2 link functions ? Other wise the code looks allright. what is the intention of your code. Do you want to run this piece of code every time the directive loads for the first time ? Also, have you included the reference of JQuery ? — Anand
– Anand, Commented May 13, 2016 at 14:07
if I insert the piece of jquery code in the function link, works perfect, but I need create a function for menu and make both run. Understand? — raduken
– raduken, Commented May 13, 2016 at 14:20
write 2 function encapsulating the behaviour and call inside link. There can be only 1 link function — Anand
– Anand, Commented May 13, 2016 at 14:46

Henrique Limas · Accepted Answer · 2016-05-13 14:58:04Z

1

In the returning object of the directive you are using two links properties. You need to put the jQuery code you mention inside of the link function already declared and use just one link property in the returned object.

angular.module('test').directive('leftBar', [
  'leftBarService',
  function leftBar(leftBarService) {
    'use strict';

    var
      scope = {
        onLeafNode: '='
      };

    function link($scope, $element) {
      $element.leftBar({
        speed: 1000,
        useDynamicLoading: false,
        onLeafNodeReched: $scope.onLeafNode
      });

      menu();
    }

    function menu() {
      $('#close, #menu-toggle').click(function(e) {
        e.preventDefault();
        $('#wrapper').toggleClass('toggled');
      });
    }

    return {
      restrict: 'A',
      scope: scope,
      link: link,
      templateUrl: 'app/test/leftBar/leftBar.html'
    };
  }

]);

edited May 13, 2016 at 14:58

answered May 13, 2016 at 14:06

Henrique Limas

3171 silver badge11 bronze badges

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

4 Comments

raduken Over a year ago

ok right there will work, but i need put this code in a function understand? I can't put inside the link function.

Henrique Limas Over a year ago

You can put it in a function, and call this function inside the link function. I update the code to show how to do this

raduken Over a year ago

thanks, just one thing menu sould be write in top on link right? how i will call menu if the fucntion is bellow? did load yet am i right?

Henrique Limas Over a year ago

Because of var hoisting in JavaScript it does not matter in this case where you put the function declaration. More about hoisting. I recommend you using the AngularJS Style Guide by John Papa.

32teeths · Accepted Answer · 2016-05-13 14:08:43Z

0

When starting with angular , it is always better to leave your good practices in JQuery behind , because all that becomes a bad practice in angular and it is better to use an angular directive (somebody have written what you want already) than use JQuery within a directive . For what you are trying to do you can refer the collapse directive in https://angular-ui.github.io/bootstrap/ .

answered May 13, 2016 at 14:08

32teeths

1,5092 gold badges15 silver badges32 bronze badges

Collectives™ on Stack Overflow

how to apply a jquery code in angular directive

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related