Angular JS Magazine

miercuri, 8 octombrie 2014

Angular Custom Directive and Transclusion With Data Value From Directive

In this tip, we will adjust the Angular Custom Directive and Transclusion With Data Value From Controller for wrapping in our popup the data value from directive scope. For this, we need to set the scope property to false. In this case, the directive will operate on the controller scope and any values defined in the link function will be reflected in the transcluded expressions:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <link href="./css/popup.css" rel="stylesheet"/>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
    <script type="text/ng-template" id="popupTemplate">
        <div id="popupTrigger">
            <div id="popupText">{{title}}</div>
            <div id="popupContainer">
                <div id="popupContent">
                    <div ng-transclude></div>
                </div>
            </div>
        </div>
    </script>
    <script>
        angular.module("appModule", [])
                .controller("appCtrl", function ($scope) {

                })
                .directive("popup", function () {
                    return {
                        link: function (scope, element, attrs) {
                            scope.title="ATP";
                            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 }
                            ];
                        },
                        template: function () {
                            return angular.element(
                                    document.querySelector("#popupTemplate")).html();
                        },
                        scope: false,
                        restrict: 'E',
                        transclude: true
                    }
                });
    </script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
    <br/>
    <popup>
        <h4>ATP Singles Rankings</h4>
        <table class="table">
            <thead>
            <tr>
                <th>Name</th>
                <th>Rank</th>
                <th>Age</th>
                <th>Prize Money</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in players">
                <td>{{item.name | uppercase}}</td>
                <td>{{item.rank}}</td>
                <td>{{item.age}}</td>
                <td>{{item.prizemoney | currency}}</td>
            </tr>
            </tbody>
        </table>
    </popup>
</div>
</body>
</html>