Skip to content

Instantly share code, notes, and snippets.

@ashishdasnurkar
Forked from anonymous/index.html
Last active August 29, 2015 14:23
Show Gist options
  • Save ashishdasnurkar/c5b05dd80027295debc0 to your computer and use it in GitHub Desktop.
Save ashishdasnurkar/c5b05dd80027295debc0 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html ng-app="directivesModule">
<head>
<meta name="description" content="Simple angular directive example">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body >
<div highlight-me>Click Me!</div>
<script id="jsbin-javascript">
// Code goes here
(function() {
var highlightMe = function () {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
elem.on('mouseenter', function() {
elem.css('background-color', 'yellow');
});
elem.on('mouseleave', function() {
elem.css('background-color', 'white');
});
}
};
};
angular.module('directivesModule', [])
.directive('highlightMe', highlightMe);
}());
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Code goes here
(function() {
var highlightMe = function () {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
elem.on('mouseenter', function() {
elem.css('background-color', 'yellow');
});
elem.on('mouseleave', function() {
elem.css('background-color', 'white');
});
}
};
};
angular.module('directivesModule', [])
.directive('highlightMe', highlightMe);
}());</script></body>
</html>
// Code goes here
(function() {
var highlightMe = function () {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
elem.on('mouseenter', function() {
elem.css('background-color', 'yellow');
});
elem.on('mouseleave', function() {
elem.css('background-color', 'white');
});
}
};
};
angular.module('directivesModule', [])
.directive('highlightMe', highlightMe);
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment