Angular JS Magazine

sâmbătă, 27 septembrie 2014

Creating a Simple Custom Directive

This tip shows you how to create a simple custom directive that expose the data in an ordered list:

<!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>
        angular.module("appModule", [])
                .controller("appCtrl", function ($scope) {
                    $scope.players = [
                        { name: 'Nadal, Rafael (ESP)'},
                        { name: 'Djokovic, Novak (SRB)'},
                        { name: 'Federer, Roger (SUI)'},
                        { name: 'Wawrinka, Stan (SUI)'},
                        { name: 'Ferrer, David (ESP)'},
                        { name: 'Tsonga, Jo-Wilfried (FRA)'},
                        { name: 'Simon, Gilles (FRA)'},
                        { name: 'Mayer, Leonardo (ARG)'},
                        { name: 'Murray, Andy (GBR)'},
                        { name: 'Dimitrov, Grigor (BUL)'},
                        { name: 'Cilic, Marin (CRO)'}
                    ];
                })
                .directive("orderedList", function () {
                    return function (scope, element, attrs) {
                        var data = scope[attrs["orderedList"]];
                        if (angular.isArray(data)) {
                            var listElem = angular.element("<ol>");
                            element.append(listElem);
                            for (var i = 0; i < data.length; i++) {
                                listElem.append(angular.element('<li>').text(data[i].name));
                            }
                        }
                    }
                });
    </script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">

    <h4>Creating a Simple Custom Directive - List Directive</h4>

    <div ordered-list="players"></div>
</div>
</body>
</html>