-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathone-way-binding-demo.html
90 lines (85 loc) · 2.5 KB
/
one-way-binding-demo.html
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
<!doctype html>
<html>
<head>
<style>
body {
font-size: 48px;
font-family: 'Helvetica', sansserif;
}
button {
background-color: blue;
color: white;
font-size: 48px;
border: solid 1px red;
border-radius: 5px;
margin-bottom: 50px;
}
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div ng-app="one-way-binding">
<parent-component></parent-component>
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
const falcon = {
name: 'Millenium Falcon',
pilot: 'Han Solo'
};
const xWing = {
name: 'X-Wing',
pilot: 'BB-8'
};
const changeShip = function (ship) {
return ship === falcon ? xWing : falcon;
};
const changePilot = function (ship) {
if (ship === falcon) {
return ship.pilot === 'Han Solo' ? 'Rey' : 'Han Solo';
} else {
return ship.pilot === 'BB-8' ? 'Dameron Poe' : 'BB-8';
}
};
const parentComponent = {
template: `<div>ParentController</div>
<div>Ship: {{$ctrl.ship.name}}<br> Pilot: {{$ctrl.ship.pilot}}</div>
<div><button ng-click="$ctrl.changeShip()">Change whole object</button>
<button ng-click="$ctrl.changePilot()">Just change property</button></div>
<child-component child-ship="$ctrl.ship"></child-component>`,
controller: function () {
this.ship = falcon;
this.changeShip = function () {
this.ship = changeShip(this.ship);
};
this.changePilot = function () {
this.ship.pilot = changePilot(this.ship);
}
}
};
const childComponent = {
template: `<span style="font-family: 'Courier New'"><child-component child-ship="$ctrl.ship"></child-component></span>
<div>ChildController</div>
<div>Ship: {{$ctrl.childShip.name}}<br> Pilot: {{$ctrl.childShip.pilot}}</div>
<div><button ng-click="$ctrl.changeShip()">Change whole object</button>
<button ng-click="$ctrl.changePilot()">Just change property</button></div>`,
bindings: {
childShip: '='
},
controller: function () {
this.changeShip = function () {
this.childShip = changeShip(this.childShip);
};
this.changePilot = function () {
this.childShip.pilot = changePilot(this.childShip);
};
}
};
angular.module('one-way-binding', [])
.component('parentComponent', parentComponent)
.component('childComponent', childComponent);
</script>
</body>
</html>