Angular Directives with jQuery - Part 1

Completed example

I often get asked how to manipulate the dom in Angular using jqLite / jQuery, and after looking online and not coming across much that resonated with me, I decided to write a quick post on how I do it when I run into this problem. (note: this may or may not be the best way to solve this or any specific problem, I will leave that up to you to decide.)

This directive will be a nav that will scroll down the page when one of the three links are clicked.

First, set up your blank directive:


HTML

		<div>

		<p class="about">ABOUT</p>
		<p class="team">TEAM</p>
		<p class="contact">CONTACT</p>

		</div>
		

JavaScript

		angular.module('myApp', [])

		.directive('myDirective', myDirective)

		function myDirective() {
		 return {
		   
		 }
		}

		

Now, we set our directive to be an attribute and declare our link function (which has not yet been defined):


HTML

		<div>

		<p class="about">ABOUT</p>
		<p class="team">TEAM</p>
		<p class="contact">CONTACT</p>

		</div>
		

JavaScript

		angular.module('myApp', [])

		.directive('myDirective', myDirective)

		function myDirective() {
			return {
			   restrict: 'A',
			   link: clicker
			 }
		}

		

Next, we define our clicker function and store our three links into variables:


HTML

		<div>

		<p class="about">ABOUT</p>
		<p class="team">TEAM</p>
		<p class="contact">CONTACT</p>

		</div>
		

JavaScript

		angular.module('myApp', [])
		.directive('myDirective', myDirective);

		function myDirective() {           
		  return {
		   restrict: 'A',
		   link: clicker
		 }

		function clicker() {
			
			var about = $('.about');
			var team = $('.team');
			var contact = $('.contact');

			}
		}

		

Now, we add the click function to the three links:


HTML

		<div>

		<p class="about">ABOUT</p>
		<p class="team">TEAM</p>
		<p class="contact">CONTACT</p>

		</div>
		

JavaScript

		angular.module('myApp', [])
		.directive('myDirective', myDirective);

		function myDirective() {           
		  return {
		   restrict: 'A',
		   link: clicker
		 }

		function clicker() {
		
		  var about = $('.about');
		  var team = $('.team');
		  var contact = $('.contact');

		  $(about).bind('click', function() {
		  	$("body, html").animate({scrollTop: 0}, "slow");			
		  })

		  $(team).bind('click', function() {
			  $("body, html").animate({scrollTop: 500}, "slow");			
		  })

		  $(contact).bind('click', function() {
			  $("body, html").animate({scrollTop: 1000}, "slow");			
		  })
		 }
		}
		

Finally, we add our directive to our html:


HTML

		<div my-directive>

		<p class="about">ABOUT</p>
		<p class="team">TEAM</p>
		<p class="contact">CONTACT</p>

		</div>
		

JavaScript

		angular.module('myApp', [])
		.directive('myDirective', myDirective);

	  function myDirective() {           
	  return {
	   restrict: 'A',
	   link: clicker
	   }

	  function clicker() {
		
		var about = $('.about');
		var team = $('.team');
		var contact = $('.contact');

		$(about).bind('click', function() {
			$("body, html").animate({scrollTop: 0}, "slow");			
		})

		$(team).bind('click', function() {
			$("body, html").animate({scrollTop: 500}, "slow");			
		})

		$(contact).bind('click', function() {
			$("body, html").animate({scrollTop: 1000}, "slow");			
		})
	  }
	  }
		

Completed example

questions? contact me