Add slave controller and move some of the master directive features into the slave controller.

Author: bennadel

app/controllers/master-controller.js

@@ -53,15 +53,6 @@
 			};
 
 
-			// I reposition the given slave.
-			$scope.repositionSlave = function( slave, x, y ) {
-
-				slave.x = x;
-				slave.y = y;
-
-			};
-
-
 			// -- Set Scope Variables. ---------------------- //
 
 

app/controllers/slave-controller.js

@@ -0,0 +1,35 @@
+(function( ng, app ) {
+
+	"use strict";
+
+	app.controller(
+		"SlaveController",
+		function( $scope ) {
+
+
+			// -- Define Scope Methods. --------------------- //
+
+
+			// I remove the current slave from the collection.
+			$scope.remove = function() {
+
+				// Pass this responsibility up the scope chain to the master controller (and its
+				// collection of slave instances).
+				$scope.removeSlave( $scope.slave );
+
+			};
+
+
+			// I reposition the current slave.
+			$scope.reposition = function( x, y ) {
+
+				$scope.slave.x = x;
+				$scope.slave.y = y;
+
+			};
+
+
+		}
+	);
+
+})( angular, demo );

app/directives/master.js

@@ -110,7 +110,8 @@
 						element.on( "mousemove.bnMaster", handleMouseMove );
 						element.on( "mouseup.bnMaster", handleMouseUp );
 
-					// The user clicked on the master directly.
+					// The user clicked on the master canvas directly. We'll use this as an invite
+					// to create a new slave handle.
 					} else {
 
 						$scope.$apply(
@@ -126,8 +127,7 @@
 				}
 
 
-				// I listen for mouse movements to broadcast new position deltas to all of
-				// the slaves.
+				// I listen for mouse movements to broadcast new position deltas to all of the slaves.
 				function handleMouseMove( event ) {
 
 					controller.moveTo(

app/directives/slave.js

@@ -32,8 +32,7 @@
 				// the slave directly, as this WILL happen inside of a $digest.
 				function reposition( deltaX, deltaY ) {
 
-					$scope.repositionSlave(
-						$scope.slave,
+					$scope.reposition(
 						( $scope.slave.x + deltaX ),
 						( $scope.slave.y + deltaY )
 					);
@@ -96,7 +95,7 @@
 					$scope.$apply(
 						function() {
 
-							$scope.removeSlave( $scope.slave );
+							$scope.remove();
 
 						}
 					);
@@ -125,6 +124,11 @@
 					"$destroy",
 					function( event ) {
 
+						// Clean up the master-slave binding in case this element is removed outside
+						// of our internal event handling.
+						masterController.unbind( slaveController );
+
+						// Clear any existing mouse bindings.
 						element.off( "mousedown.bnSlave" );
 						$document.off( "mousemove.bnSlave" );
 						$document.off( "mouseup.bnSlave" );

index.htm

@@ -14,7 +14,7 @@ <h1>
 	</h1>
 
 
-	<!-- BEGIN: Master. -->
+	<!-- BEGIN: Master Canvas. -->
 	<div 
 		ng-controller="MasterController" 
 		bn-master
@@ -25,6 +25,7 @@ <h1>
 		<ol class="handles">
 			<li 
 				ng-repeat="slave in slaves"
+				ng-controller="SlaveController"
 				bn-slave 
 				class="slave"
 				ng-style="{ left: ( slave.x + 'px' ), top: ( slave.y + 'px' ) }">
@@ -55,7 +56,7 @@ <h1>
 
 
 	</div>
-	<!-- END: Master. -->
+	<!-- END: Master Canvas. -->
 
 
 	<!-- Load jQuery and AngularJS from the CDN. -->
@@ -71,6 +72,7 @@ <h1>
 	<!-- Load the app module and its classes. -->
 	<script type="text/javascript" src="app/main.js"></script>
 	<script type="text/javascript" src="app/controllers/master-controller.js"></script>
+	<script type="text/javascript" src="app/controllers/slave-controller.js"></script>
 	<script type="text/javascript" src="app/directives/master.js"></script>
 	<script type="text/javascript" src="app/directives/slave.js"></script>