Element.css demo

by gogirl

HTML

<div ng-app='app'>
<p my-dctv>
    <h4>Directive demo: mouse over changed title to red color</h4>
</p>
</div>

JavaScript

var app = angular.module("app", []);
myApp.directive("myDctv", function() {
  return function(scope, element, attrs) {
    element.bind("mouseenter", function() {
      element.css("background", "yellow");
    });
    element.bind("mouseleave", function() {
      element.css("background", "none");
    });
  }
});
app.directive('myColorRedDctv1', function () {
	return {
		restrict: 'EA',
		link:function (scope, element, attrs) {
              element.bind("mouseenter", function() {
                   element.css('color','red');
              });
              element.bind("mouseleave", function() {
                    element.css("color","black");
              });                
   }
});
app.directive("myColorRedDctv", function() {
    return function(scope, element, attrs) {
        element.bind("mouseenter", function() {
            element.css("color","red");
        });
        element.bind("mouseleave", function() {
            element.css("color","black");
        });
    }
});