Acceptable way of using jQuery methods in Angular directives Here is my plunker example of what I am doing.

jQuery is a great way to use slide transitions and seem to work well with angular as long as you are only using the methods on the element object inside a directive. 

Basically I am using a directive for divs I want to slide toggle which listens for a broadcast from the controller which happens when the click function is called in the controller.

I am not using jQuery selectors and am only calling slideToggle() on the angular element.

Is this an acceptable angular way of doing this?  If not, what is?

HTML

&lt;html ng-app="myApp"&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link type="text/css" rel="stylesheet" href="style.css"/&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/head&gt;

  &lt;div ng-controller="mainCtrl"&gt;
    &lt;div class="login-div"&gt;
        &lt;div class="login toggle"&gt;
            &lt;input type="text" placeholder="username" /&gt;
            &lt;input type="password" placeholder="password" /&gt;
            &lt;button class="btn-login"&gt;Login&lt;/button&gt;
            &lt;div class="link"&gt;
                &lt;p ng-click="toggleClick()"&gt;Click here&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="sign-up toggle"&gt;
            &lt;input type="text" placeholder="username" /&gt;
            &lt;input type="email" placeholder="email" /&gt;
            &lt;input type="password" placeholder="password" /&gt;
            &lt;button class="btn-login"&gt;Sign up&lt;/button&gt;
            &lt;div class="link"&gt;
                &lt;p ng-click="toggleClick()"&gt;Click here again&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="btn-close"&gt;
            &lt;button&gt;X&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/html&gt;


JavaScript

var myApp = angular.module("myApp", []);

myApp.controller('mainCtrl', function($scope, $rootScope) {
  $scope.toggleClick = function(){
    $rootScope.$broadcast("toogleDiv","");
  };
});

myApp.directive('toggle', function () {
    return {
        restrict:'C',
        link: function (scope, element, attrs) {
            scope.$on("toogleDiv", function(e, val){
              element.slideToggle();
            });
        }                  
    }
});
I see no reason not to use JQuery animations. If you want to have your app pure angular, use angular animations.

The main issue usually being nagged about is view (dom) manipulation code in the controller, so the directive is the way to go, for sure.

The event broadcast is overkill though, just put the onclick in the directive too :) unless you are planning to put the link outside of &lt;div class="toggle"....