Angular JS Magazine

marți, 7 octombrie 2014

Custom Directive - Inheritance of Objects and Properties

In Giving Each Directive Instance Its Own Scope you saw how to provide a scope per directive instance. These scopes are part of the regular scope hierarchy, which means that scope inheritance is available here as you saw in Using Controller Inheritance. So, below we have:

  • $scope.court - This is an object shared between instances of the directive
  • $scope.injury - This is assigned directly on the controller scope -all directive scopes will start with the same value, but create and modify their own version in their own scopes when the input element is modified
  • selectedPlayer - This is not assigned. Each instance of the directive will create separate selectedPlayer properties when the input element is modified.

<!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: true
                    }
                });
    </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>