dontangg/directiveTest.html

## directiveTest.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script>

var app = angular.module('myModule', []);

app.directive('leftPanel', function() {
	return {
		restrict: 'EA', //E = element, A = attribute, C = class, M = comment
		template: '<ul><li data-ng-repeat="envelope in envelopes">{{ envelope.name }}<ul data-ng-if="envelope.children"><li data-ng-repeat="envelope2 in envelope.children">{{ envelope2.name }} <span>{{ envelope2.amount | currency }}</span><ul data-ng-if="envelope.children"><li data-ng-repeat="envelope3 in envelope2.children">{{ envelope3.name }} <span>{{ envelope3.amount | currency }}</span></li></ul></li></ul></li></ul>',
		controller: function($scope) {
			$scope.envelopes = [
				{
					name: 'Bills',
					children: [
						{
							name: 'Yearly',
							children: [
								{ name: 'Football tickets', amount: 124.6 },
								{ name: 'Domain names', amount: 10 }
							]
						}
					]
				},
				{
					name: 'Gifts & Donations',
					children: [
					]
				},
				{
					name: 'Shopping',
					children: [
						{
							name: 'Food',
							children: [
								{ name: 'Groceries', amount: 350 },
								{ name: 'Eating Out', amount: 204.21 }
							]
						},
						{ name: 'Makeup', amount: 120 }
					]
				}
			];
		}
	};
});

</script>
</head>
<body data-ng-app='myModule'>

<div data-left-panel></div>

</body>
</html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
	<script>

	var app = angular.module('myModule', []);

	app.directive('leftPanel', function() {
	return {
	restrict: 'EA', //E = element, A = attribute, C = class, M = comment
	template: '<ul><li data-ng-repeat="envelope in envelopes">{{ envelope.name }}<ul data-ng-if="envelope.children"><li data-ng-repeat="envelope2 in envelope.children">{{ envelope2.name }} <span>{{ envelope2.amount \| currency }}</span><ul data-ng-if="envelope.children"><li data-ng-repeat="envelope3 in envelope2.children">{{ envelope3.name }} <span>{{ envelope3.amount \| currency }}</span></li></ul></li></ul></li></ul>',
	controller: function($scope) {
	$scope.envelopes = [
	{
	name: 'Bills',
	children: [
	{
	name: 'Yearly',
	children: [
	{ name: 'Football tickets', amount: 124.6 },
	{ name: 'Domain names', amount: 10 }
	]
	}
	]
	},
	{
	name: 'Gifts & Donations',
	children: [
	]
	},
	{
	name: 'Shopping',
	children: [
	{
	name: 'Food',
	children: [
	{ name: 'Groceries', amount: 350 },
	{ name: 'Eating Out', amount: 204.21 }
	]
	},
	{ name: 'Makeup', amount: 120 }
	]
	}
	];
	}
	};
	});

	</script>
	</head>
	<body data-ng-app='myModule'>

	<div data-left-panel></div>

	</body>
	</html>