angular.module('WeatherApp', []) .controller('mainController', ['$scope', function($scope) { $scope.currentWeather = { description: 'Moc hezky', temperature: 24 } $scope.windSpeed = 20; }]) .directive('weatherWidget', [function() { return { scope: true, link: function($scope, $elem, $attrs) { }, template: '<label for="temp">Teplota: </label>' + '<input type="text" ng-model="currentWeather.temperature" id="temp" name="temp">' + '<br>' + '<label for="wind">Rychlost větru: </label>' + '<input type="text" ng-model="windSpeed" id="wind" name="wind">' } }])
<div ng-app="WeatherApp" ng-controller="mainController"> <div class="outer-scope"> <h2>Aktuální počasí: {{currentWeather.description}}</h2> <p>Je {{currentWeather.temperature}} stupňů, s rychlostí větru {{windSpeed}} m/s.</p> </div> <weather-widget></weather-widget> </div>