angularJS-tutorial/lab17_1.html at master · eramitmishra/angularJS-tutorial · 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!--
    AngularJS Custom Directives
     -->

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Custom Directives</title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.js"></script>
    <script>
        var empApp = angular.module("empApp", [])
            .controller("EmployeeController", function ($scope, $http) {
                $scope.Ram = { name: "Ram", address: "Delhi" };
                $scope.Ravi = { name: "Ravi", address: "Mumbai" };
                $scope.emplist = [{ name: "Mohit", address: "Agra" }, { name: "Ramesh", address: "Delhi" }];

            })
            .directive("empDetails", function () {
                var empDirective = {};
                empDirective.restrict = "E";
                empDirective.template = "Employee Name: <b>{{emp.name}}</b>, Address: <b>{{emp.address}}</b><br/>";
                empDirective.scope = {
                    emp: "=name"
                };
                empDirective.compile = function (element, attributes) {
                    var linkFunction = function ($scope, element, attributes) {
                        if (angular.isArray($scope.emp)) {
                            var div = "<div class='divemp'><h2>Employees List</h2>";
                            for (var i = 0; i < $scope.emp.length; i++) {
                                var empData = $scope.emp[i];
                                div += "<div> Employee Name: <b>" + empData.name + "</b>, Address: <b>" + empData.address + "</b></div>";
                            }
                            div += "</div>";
                            element.html(div);
                        }
                        //if (angular.isObject($scope.emp) && !angular.equals(attributes.name, "emplist")) {
                        //    element.html("Employee Name: <b>" + $scope.emp.name + "</b>, Address: <b>" + $scope.emp.address + "</b><br/>");
                        //    element.css("background-color", "#ffff00");
                        //}
                        //else if (angular.isArray($scope.emp)) {
                        //    var div = "<div class='divemp'><h2>Employees List</h2>";
                        //    for (var i = 0; i < $scope.emp.length; i++) {
                        //        var empData = $scope.emp[i];
                        //        div += "<div> Employee Name: <b>" + empData.name + "</b>, Address: <b>" + empData.address + "</b></div>";
                        //    }
                        //    div += "</div>";
                        //    element.html(div);
                        //}
                    }

                    return linkFunction;
                }

                return empDirective;
            });


    </script>

    <style>
        .divemp {
            background-color :#306fd3;
            color : white;
                width: 350px;
        }

    </style>
</head>
<body ng-app="empApp">
    <div ng-controller="EmployeeController">
        <emp-Details name="Ram"></emp-Details>
        <emp-Details name="Ravi"></emp-Details>
        <br />
        <emp-Details name="emplist"></emp-Details>
    </div>
</body>
</html>