1

I wrote a simple directive for my sidebar to perform some basic animations, such as sliding in and also modifying the width and margin of the content class.

My question is that is it OK to use jQuery animations in this way:

//sidebar directive, slides in and out on click
projectDirectives.directive('sideBar', function(){
    return {
      restrict: 'A',
      link: function(scope, element, attrs){
        var $sidebar = element.find('#navbar');
        var $content = $('.content');
        element.find('#nav_icon').on('click', function(event){
          if(!scope.navbar){
            scope.navbar = true;
            scope.margin = parseInt($sidebar.css('marginLeft'));
            scope.contentWidth = parseInt($content.css('width'));
            $content.animate({'width':scope.contentWidth - Math.abs(scope.margin) + 'px',
                'marginLeft':Math.abs(scope.margin)
            });
            $sidebar.animate({'marginLeft':0});
          } else {
            scope.navbar = false;
            $content.animate({'width':scope.contentWidth + 'px',
                'marginLeft': 0
            });
            $sidebar.animate({'marginLeft':scope.margin+'px'});
          }
        })
      },
      controller: ['$scope', function($scope){
        $scope.margin = null;
        $scope.navbar = false;
        $scope.contentWidth = null;
      }]
    };
}

It works, but I know that there are very specific and common conventions as to how an Angular project is structured

1 Answers1

-1

Mixing jQuery with AngularJs is a bad practice since you can do it with AngularJs.

A good answer for your question.

Hope this helps!

Community
  • 1
  • 1
John Roca
  • 1,204
  • 1
  • 14
  • 27