learning-angular/03-8-compilevslink.html at master · JsNuts/learning-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
	<title>Compile vs. Link</title>

	<style>*{font-family: Tahoma; font-size: 1em;}</style>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller("Ctrl", function($scope){
	$scope.data = [
	{country:"India"},
	{country:"Indonesia"},
	{country:"Canada"},
	{country:"USA"},
	{country:"China"}
	];
});

app.directive("country", function(){
	return {
		restrict: "E",
		scope:{},
		compile:  function(element,attrs){
			return {
				pre: function(scope,element){
				console.log("logged during compile pre"+scope.hello);
				},
				post:function(scope,element){
					console.log("logged during compile post"+ scope.hello);
				}
			}
		},
		controller: function($scope, $element){
			$scope = {hello:"sup"}
			console.log("logged during controller"+ $scope.hello);
		},
		link:function(scope, element, attrs, ctrl){
			console.log("logged during link"+ scope.hello);
			}
}});

</script>
</head>
<body ng-app="app">
<div ng-controller="Ctrl">
<div ng-repeat="country in data">
<country id="{{country.country}}">{{country.country}}</country>
</div>
<!-- this produces an error on its own:
<city>Hyderabad</city> -->

</div>
</body>
</html>