<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>
Using jQuery Instead Of jqLite In AngularJS
</title>
<link rel="stylesheet" type="text/css" href="./demo.css"></link>
</head>
<body>
<h1>
Using jQuery Instead Of jqLite In AngularJS
</h1>
<p>
<em>Start clicking, bro.</em>
</p>
<ul bn-demo>
<!-- Dynamically populated. -->
</ul>
<!-- Load scripts. -->
<script type="text/javascript" src="../../vendor/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.6.min.js"></script>
<script type="text/javascript">
// Create an application module for our demo.
var app = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// I add an element to the point of a click and then randomly select one of the
// existing elements in the lsit.
app.directive(
"bnDemo",
function() {
// Create a jQuery plugin to help with the demo. Since we are including
// jQuery in our application, "angular.element" is a reference to the
// jQuery object, which means we can define plugins off the "element".
angular.element.fn.random = function() {
return( this.eq( Math.floor( this.length * Math.random() ) ) );
};
// Create a jQuery plugin to help set the position of the elements in
// the collection based on a pixel-based X/Y coordinates and an optional
// offset that is added to both the coordinate values.
angular.element.fn.xyo = function( x, y, offset ) {
this.css({
left: ( ( x + ( offset || 0 ) ) + "px" ),
top: ( ( y + ( offset || 0 ) ) + "px" )
});
return( this );
};
// Return the directive configuration.
return({
link: link,
restrict: "A"
});
// ---
// PUBLIC METHODS.
// ---
// I bind the JavaScript events to the local scope.
function link( scope, element, attributes ) {
element.on(
"click",
function handleClickEvent( event ) {
// If the user clicked on an existing LI, then don't change
// the contents of the container, just select the target.
if ( angular.element( event.target ).is( "li" ) ) {
// Select the target element.
element.children()
.removeClass( "selected" )
.filter( event.target )
.addClass( "selected" )
;
return;
}
// Create a new element at the click position.
angular.element( "<li></li>" )
.xyo( event.pageX, event.pageY, -25 )
.appendTo( element )
;
// Select a random element in the list.
element.children()
.removeClass( "selected" )
.random()
.addClass( "selected" )
;
}
);
}
}
);
</script>
</body>
</html>