Current weather example - scope: true

by emilcieslar

HTML

<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>

SCSS

.outer-scope {
  padding: 10px;
  border: 2px solid green;
}

JavaScript

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">'

  }

}])