Skip to content

Instantly share code, notes, and snippets.

@kalbarczyk

kalbarczyk/element-bind.html

Created March 18, 2015 00:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kalbarczyk/62611d3dcca862f7bfe6 to your computer and use it in GitHub Desktop.
Save kalbarczyk/62611d3dcca862f7bfe6 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS - angular.element (jqLite)
Raw
element-bind.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title>AngularJS - angular.element (jqLite)</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
</head>
<body>
<div class="container">
<div data-wjs-color-changer="red"><h1>Tło czerwone</h1></div>
<div data-wjs-color-changer="yellow"><h1>Tło żółte</h1></div>
<div data-wjs-color-changer="green"><h1>Tło zielone</h1></div>
</div>
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script>
(function() {
'use strict';
angular
.module('app', []);
})();
(function() {
'use strict';
angular
.module('app')
.directive('wjsColorChanger', wjsColorChanger);
function wjsColorChanger() {
return function (scope, element, attrs) {
element.bind("mouseenter", function () {
element.css("background", attrs.wjsColorChanger);
});
element.bind("mouseleave", function () {
element.css("background", "none");
});
}
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment