AngularJS template expanding directive

Vytvorenie nového grafického prvku a naplnenie údajmi.

Do nového grafického prvku sú expandované premenné zo $scope.

script

<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js></script>

directive-template.html

<style>
    .kontainer {
    background: #b6e356;
    border-radius: 8px;
    padding: 10px;
    }
</style>

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="kontainer">
    <hello-world></hello-world>
    </div>
</div>

directive-template.js

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

app.controller('myCtrl', ['$scope', function($scope) {
  $scope.osoba = {
    meno: 'Arduino',
    adresa: 'Lopúchova 12, 974 11 Banská Bystrica'
  };
}]);

app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '<div><h3>Hello {{osoba.meno}}!</h3><p>{{osoba.adresa}}</p></div>'
  };
});