Compile video part 2

K.C. Hunter · K.C. Hunter · commit 3ae3b10f3556 · 2014-12-13T17:01:10.000-05:00
diff --git a/src/angularjstutorial.js b/src/angularjstutorial.js
@@ -7,6 +7,21 @@ app.controller('MainController', function ($scope)
 		$scope.labelName + '</div>');
 })
 
+.directive('compileDirective', function ($compile)
+{
+	return {
+		restrict: 'E',
+		template: '<div>New compile template</div>',
+		controller: 'MainController',
+		link: function (scope, elm, attrs)
+		{
+			var compileIt 			= $compile(scope.newElement);
+			var content 			= compileIt(scope);
+			elm.append(content);
+		}
+	}
+})
+
 .directive('pageDirective', function ()
 {
 	return {
@@ -17,19 +32,16 @@ app.controller('MainController', function ($scope)
 		compile: function (tElem, tAttrs)
 		{
 			console.log('compile it. This is the original compiled DOM.');
-			debugger;
 			return {
 				pre: function preLink (scope, iElement, iAttrs)
 				{
 					console.log('pre');
 					iElement.html('<div class="panel panel-default">Now a panel</div>');
-					debugger;
 				},
 				post: function postLink (scope, iElement, iAttrs)
 				{
 					console.log('post');
 					iElement.append(scope.newElement);
-					debugger;
 				}
 			}
 		}
@@ -46,18 +58,15 @@ app.controller('MainController', function ($scope)
 		compile: function (tElem, tAttrs)
 		{
 			console.log('2 compile it. This is the original compiled DOM.');
-			debugger;
 			return {
 				pre: function preLink (scope, iElement, iAttrs)
 				{
 					console.log('2 pre');
-					debugger;
 				},
 				post: function postLink (scope, iElement, iAttrs)
 				{
 					console.log('2 post');
 					iElement.append(scope.newElement);
-					debugger;
 				}
 			}
 		}
@@ -74,17 +83,14 @@ app.controller('MainController', function ($scope)
 		compile: function (tElem, tAttrs)
 		{
 			console.log('3 compile it. This is the original compiled DOM.');
-			debugger;
 			return {
 				pre: function preLink (scope, iElement, iAttrs)
 				{
 					console.log('3 pre');
-					debugger;
 				},
 				post: function postLink (scope, iElement, iAttrs)
 				{
 					console.log('3 post');
-					debugger;
 				}
 			}
 		}
diff --git a/src/compile.html b/src/compile.html
@@ -15,6 +15,8 @@
 		<h1>Features</h1>
 		<h2>Compile</h2>
 
+		<compile-directive></compile-directive>
+
 		<page-directive></page-directive>
 
 		<page-directive-two></page-directive-two>
diff --git a/src/resources/js/compile.js b/src/resources/js/compile.js
@@ -7,6 +7,21 @@ app.controller('MainController', function ($scope)
 		$scope.labelName + '</div>');
 })
 
+.directive('compileDirective', function ($compile)
+{
+	return {
+		restrict: 'E',
+		template: '<div>New compile template</div>',
+		controller: 'MainController',
+		link: function (scope, elm, attrs)
+		{
+			var compileIt 			= $compile(scope.newElement);
+			var content 			= compileIt(scope);
+			elm.append(content);
+		}
+	}
+})
+
 .directive('pageDirective', function ()
 {
 	return {
@@ -17,19 +32,16 @@ app.controller('MainController', function ($scope)
 		compile: function (tElem, tAttrs)
 		{
 			console.log('compile it. This is the original compiled DOM.');
-			debugger;
 			return {
 				pre: function preLink (scope, iElement, iAttrs)
 				{
 					console.log('pre');
 					iElement.html('<div class="panel panel-default">Now a panel</div>');
-					debugger;
 				},
 				post: function postLink (scope, iElement, iAttrs)
 				{
 					console.log('post');
 					iElement.append(scope.newElement);
-					debugger;
 				}
 			}
 		}
@@ -46,18 +58,15 @@ app.controller('MainController', function ($scope)
 		compile: function (tElem, tAttrs)
 		{
 			console.log('2 compile it. This is the original compiled DOM.');
-			debugger;
 			return {
 				pre: function preLink (scope, iElement, iAttrs)
 				{
 					console.log('2 pre');
-					debugger;
 				},
 				post: function postLink (scope, iElement, iAttrs)
 				{
 					console.log('2 post');
 					iElement.append(scope.newElement);
-					debugger;
 				}
 			}
 		}
@@ -74,17 +83,14 @@ app.controller('MainController', function ($scope)
 		compile: function (tElem, tAttrs)
 		{
 			console.log('3 compile it. This is the original compiled DOM.');
-			debugger;
 			return {
 				pre: function preLink (scope, iElement, iAttrs)
 				{
 					console.log('3 pre');
-					debugger;
 				},
 				post: function postLink (scope, iElement, iAttrs)
 				{
 					console.log('3 post');
-					debugger;
 				}
 			}
 		}

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,21 @@ app.controller('MainController', function ($scope)`
`7`	`7`	`$scope.labelName + '</div>');`
`8`	`8`	`})`
`9`	`9`
	`10`	`+.directive('compileDirective', function ($compile)`
	`11`	`+{`
	`12`	`+ return {`
	`13`	`+ restrict: 'E',`
	`14`	`+ template: '<div>New compile template</div>',`
	`15`	`+ controller: 'MainController',`
	`16`	`+ link: function (scope, elm, attrs)`
	`17`	`+ {`
	`18`	`+ var compileIt = $compile(scope.newElement);`
	`19`	`+ var content = compileIt(scope);`
	`20`	`+ elm.append(content);`
	`21`	`+ }`
	`22`	`+ }`
	`23`	`+})`
	`24`	`+`
`10`	`25`	`.directive('pageDirective', function ()`
`11`	`26`	`{`
`12`	`27`	`return {`
`@@ -17,19 +32,16 @@ app.controller('MainController', function ($scope)`
`17`	`32`	`compile: function (tElem, tAttrs)`
`18`	`33`	`{`
`19`	`34`	`console.log('compile it. This is the original compiled DOM.');`
`20`		`- debugger;`
`21`	`35`	`return {`
`22`	`36`	`pre: function preLink (scope, iElement, iAttrs)`
`23`	`37`	`{`
`24`	`38`	`console.log('pre');`
`25`	`39`	`iElement.html('<div class="panel panel-default">Now a panel</div>');`
`26`		`- debugger;`
`27`	`40`	`},`
`28`	`41`	`post: function postLink (scope, iElement, iAttrs)`
`29`	`42`	`{`
`30`	`43`	`console.log('post');`
`31`	`44`	`iElement.append(scope.newElement);`
`32`		`- debugger;`
`33`	`45`	`}`
`34`	`46`	`}`
`35`	`47`	`}`
`@@ -46,18 +58,15 @@ app.controller('MainController', function ($scope)`
`46`	`58`	`compile: function (tElem, tAttrs)`
`47`	`59`	`{`
`48`	`60`	`console.log('2 compile it. This is the original compiled DOM.');`
`49`		`- debugger;`
`50`	`61`	`return {`
`51`	`62`	`pre: function preLink (scope, iElement, iAttrs)`
`52`	`63`	`{`
`53`	`64`	`console.log('2 pre');`
`54`		`- debugger;`
`55`	`65`	`},`
`56`	`66`	`post: function postLink (scope, iElement, iAttrs)`
`57`	`67`	`{`
`58`	`68`	`console.log('2 post');`
`59`	`69`	`iElement.append(scope.newElement);`
`60`		`- debugger;`
`61`	`70`	`}`
`62`	`71`	`}`
`63`	`72`	`}`
`@@ -74,17 +83,14 @@ app.controller('MainController', function ($scope)`
`74`	`83`	`compile: function (tElem, tAttrs)`
`75`	`84`	`{`
`76`	`85`	`console.log('3 compile it. This is the original compiled DOM.');`
`77`		`- debugger;`
`78`	`86`	`return {`
`79`	`87`	`pre: function preLink (scope, iElement, iAttrs)`
`80`	`88`	`{`
`81`	`89`	`console.log('3 pre');`
`82`		`- debugger;`
`83`	`90`	`},`
`84`	`91`	`post: function postLink (scope, iElement, iAttrs)`
`85`	`92`	`{`
`86`	`93`	`console.log('3 post');`
`87`		`- debugger;`
`88`	`94`	`}`
`89`	`95`	`}`
`90`	`96`	`}`