Angular JS Magazine

marți, 7 octombrie 2014

Custom Directive - Different Data Values Based on the Same Property

In Custom Directive - One-Way Binding for an Isolated Scope we have used two instances of our custom directive, but we have used the same data values. Further, you can see that this is not mandatory, and a powerful feature of Angular is that it allows us to use different data values based on the same property:

<!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>Players:
                {{playerslocal}}
            </p>
            <p>Court: {{courtlocal}}</p>
            <p>Injury: {{injurylocal}}</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: {
                            injurylocal: "@injuryattr",
                            courtlocal: "@courtattr",
                            playerslocal: "@playersattr"
                        }
                    }
                });
    </script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
    Next match on Roland Garros:
    <table>
        <tr>
            <td>
                <div next-match injuryattr="{{injury + '. Just a mild pain in the back'}}" 
                       courtattr="{{court.name}}" playersattr="{{players}}"></div>
            </td>
            <td>
                <div next-match injuryattr="{{injury + '. 100% ready to play!'}}" 
                      courtattr="{{court.name}}" playersattr="{{players}}"></div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>