/angularjs/

AngularJS – Directive Example

2014-05-12 21:18:45

Example: https://github.com/szalek/AngularJS-Directive-Example

var app = angular.module('szalekApp', []);

app
    .controller("NameCtrl", function ($scope) {
        $scope.hello = "Welcome welcome!";

        $scope.michal = { name: 'Michał', lastname: 'Lorem', address: 'Poland' };
        $scope.ewa = { name: 'Ewa', lastname: 'Ipsum', address: 'Poland' };
        $scope.ala = { name: 'Alicja', lastname: 'Lorem', address: 'Poland' };
        $scope.kuba = { name: 'Jakub', lastname: 'Lorem', address: 'Poland' };
    })
    .directive('btbwPerson', function () {
        return {
            restrict: 'E',
            scope: {
                person: '=person'
            },
            templateUrl: 'tpl/person-row.tpl.html'
        };
    });
;

<div>
    Name: {{person.name}}, Lastname: {{person.lastname}} Address: {{person.address}}
    <hr/>
</div>


<html ng-app='"szalekApp"'>
<head>
<meta charset="utf-8"/>
<title>Angular.js Example</title>
<script src='"angular.min.js"'></script>
<script src='"app.js"'></script>
</head>
<body>
<section ng-controller='"NameCtrl"'>
<h1>{{hello}}</h1>
<btbw-person person='"michal"'></btbw-person>
<btbw-person person='"ewa"'></btbw-person>
<btbw-person person='"ala"'></btbw-person>
<btbw-person person='"kuba"'></btbw-person>
</section>
</body>
</html>