Isolate Scope

Angular Custom Directives

by manoj_antony32

HTML

<div class="mainContainer" data-ng-app="isolateApp">
		<div data-ng-controller="AppCtrl">
			<div class="row">
				<character name="Roman Reigns"
					image="resources/img/reigns.png"
					movetype="movetype"
					use-move="getMove(name, movetype, move)"
					class="col-xs-4"></character>
				<character name="Seth Rollins"
					image="resources/img/rollins.png"
					movetype="movetype"
					use-move="getMove(name, movetype, move)"
					class="col-xs-4"></character>
				<character name="Dean Ambrose"
					image="resources/img/ambrose.png"
					movetype="movetype"
					use-move="getMove(name, movetype, move)"
					class="col-xs-4"></character>
			</div>
		</div>
	</div>

JavaScript

/* use strict */
var app = angular.module("isolateApp", []);

app.controller("AppCtrl", function ($scope, $element)
{
	$scope.getMove = function (name, movetype, move)
	{
		console.log('' + name + ' performed a ' + movetype +
			' ' + move );
	}

	$scope.movetypes 	= ['Finisher', 'Offensive Move', 'Defensive Move'];
	$scope.movetype 	= $scope.movetypes[0];
})
.directive("character", function ()
{
	return {
		restrict: 'E',
		scope: {
			name: "@",
			image: "@",
			movetype: "=",
			useMove: '&'
		},
		templateUrl: 'partials/shield_isolate.html',
		controller: 'AppCtrl'
	}
})