test.html
3.96 KB
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.container>div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div ng-app="esNgAntd" ng-controller="mainCtrl">
<div class="container" style="padding: 50px">
<test a="123" b="{{b}}" c="{{c}}" d="{{d}}" e="{{e}}" f="1.00"></test>
</div>
</div>
<script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
<script>
angular
.module("esNgAntd", [])
.directive("test", function ($parse, $interpolate) {
return {
replace: true,
restrict: "E",
scope: {
f: "="
},
template: `<div><h1>I am test{{foo}}{{c.a}}</h1></div>`,
compile: function (tElement, tAttrs, transclude) {
let props = {
a: {
type: "string",
compile: tAttrs.a.indexOf("{{") !== -1
},
b: {
type: "boolean",
compile: tAttrs.b.indexOf("{{") !== -1
},
c: {
type: "object",
compile: tAttrs.c.indexOf("{{") !== -1
},
d: {
type: "array",
compile: tAttrs.d.indexOf("{{") !== -1
},
e: {
type: "number",
compile: tAttrs.e.indexOf("{{") !== -1
}
}
return function ($scope) {
Object.keys(props).forEach(function (propKey) {
tAttrs.$observe(propKey, function (newVal) {
let { type, compile } = props[propKey];
if (!compile) {
$scope[propKey] = newVal;
} else if (type === "boolean") {
$scope[propKey] = newVal === "true";
} else if (["object", "array"].includes(type)) {
$scope[propKey] = $parse(newVal)();
} else if (type === "number") {
let segments = newVal.split(".");
let len = !segments[1] ? 0 : segments[1].length;
$scope[propKey] = Math.floor(newVal * Math.pow(10, len)) / Math.pow(10, len);
} else {
$scope[propKey] = newVal;
}
})
})
if (typeof $scope.constructor === "function") {
$scope.constructor();
}
}
},
controller: function ($scope, $element, $attrs) {
$scope.constructor = function () {
console.log($scope);
}
},
}
})
.controller("mainCtrl", function ($scope, $timeout) {
$scope.b = true;
$scope.c = { a: 1 };
$scope.d = ["a"];
$scope.e = "1.0002";
$timeout(function () {
$scope.foo = false;
$scope.c.a = 2;
}, 3000)
});
</script>
</body>
</html>