<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular/angular.min.js"></script>
<style type="text/css">
</style>
<script type="text/ng-template" id="playerTemplate">
<div class="panel-body">
<p>Player:
{{selectedPlayer.name}}<br/>
<select ng-model='selectedPlayer'
ng-options='item.name group by item.age for item in players'>
<option value=''>(Pick One Player)</option>
</select>
</p>
<p>Court: <input ng-model="court.name"/></p>
<p>Injury: <input ng-model="injury"/></p>
</div>
</script>
<script>
angular.module("appModule", [])
.controller("appCtrl", function ($scope) {
$scope.injury = "No";
$scope.court = {name: "Philippe Chatrier"};
$scope.players = [
{ name: 'Nadal, Rafael (ESP)', rank: 1, age: '28', prizemoney: 66149345 },
{ name: 'Djokovic, Novak (SRB)', rank: 2, age: '27', prizemoney: 70704129 },
{ name: 'Federer, Roger (SUI)', rank: 3, age: '33', prizemoney: 84827704 },
{ name: 'Wawrinka, Stan (SUI)', rank: 4, age: '29', prizemoney: 13155060 },
{ name: 'Ferrer, David (ESP)', rank: 5, age: '32', prizemoney: 24034072 },
{ name: 'Tsonga, Jo-Wilfried (FRA)', rank: 11, age: '29', prizemoney: 1708240 },
{ name: 'Simon, Gilles (FRA)', rank: 26, age: '29', prizemoney: 760469 },
{ name: 'Lopez, Feliciano (ESP)', rank: 20, age: '33', prizemoney: 1100579 },
{ name: 'Benneteau, Julien (FRA)', rank: 28, age: '32', prizemoney: 617688 },
{ name: 'Verdasco, Fernando (ESP)', rank: 33, age: '30', prizemoney: 689219 },
{ name: 'Mayer, Leonardo (ARG)', rank: 25, age: '27', prizemoney: 946294 }
];
})
.directive("nextMatch", function () {
return {
template: function () {
return angular.element(
document.querySelector("#playerTemplate")).html();
},
scope: {}
}
});
</script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
Next match on Roland Garros:
<table>
<tr>
<td>
<div next-match></div>
</td>
<td>
<div next-match></div>
</td>
</tr>
</table>
</div>
</body>
</html>
Check the screenshot! All inputs are empty, because there is no inheritance from the controller scope, which means that there are no values defined for any of the properties specified by the ng-model directive.In other words, each directive instance has its own scope, but it doesn't inherit any data values from the controller scope, it was totally disconnected from the rest of the scope hierarchy.
Niciun comentariu:
Trimiteți un comentariu