Testing Angular Directives

by Marcus Baptiste

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="mainController">
  <p class="some-text" mc-tool-tip>This is some text</p>
</div>

CSS

.container {
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  color: #333;
}

.some-text {
   display: inline-block;
   height: auto;
  width: auto;
  padding: 5px 10px;
  background-color: #fafaaf;
}

JavaScript

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

app.directive('mcToolTip', function(){
	return {
  	restrict: 'A',
    link: function(scope, element, attrs) {
    	$(element).on('mouseover', function() {
      	$(this).css('background-color', '#f00');
      });
      
      $(element).on('mouseout', function() {
      	$(this).css('background-color', '#fafaaf');
      });
    }
  }
});

app.controller('mainController', function($scope) {
		
});