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
<html ng-app="myApp">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<div ng-controller="mainCtrl">
<div class="login-div">
<div class="login toggle">
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button class="btn-login">Login</button>
<div class="link">
<p ng-click="toggleClick()">Click here</p>
</div>
</div>
<div class="sign-up toggle">
<input type="text" placeholder="username" />
<input type="email" placeholder="email" />
<input type="password" placeholder="password" />
<button class="btn-login">Sign up</button>
<div class="link">
<p ng-click="toggleClick()">Click here again</p>
</div>
</div>
<div class="btn-close">
<button>X</button>
</div>
</div>
</div>
</html>
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();
});
}
}
});
