Current weather example - scope: {} - &

by emilcieslar

HTML

<div ng-app="WeatherApp" ng-controller="mainController as main">
  <weather-widget 
  weather-desc="main.currentWeather.description" 
  weather-temp="main.currentWeather.temperature" 
  weather-wind-speed="main.currentWeather.windSpeed" 
  display-sum="1" 
  count-sum="main.countSum()">
  </weather-widget>
</div>

JavaScript

angular.module('WeatherApp', [])

.controller('mainController', ['$scope', function($scope) {

  var self = this;

  self.currentWeather = {
    description: 'Moc hezky',
    temperature: 24,
    windSpeed: 20
  }

  self.countSum = function countSum() {
    return self.currentWeather.temperature + self.currentWeather.windSpeed;
  }

}])

.directive('weatherWidget', [function() {

  return {

    scope: {
      weatherDesc: '=',
      weatherTemp: '=',
      weatherWindSpeed: '=',
      displaySum: '@',
      countSum: '&'
    },

    template: '<h2>Aktuální počasí: {{weatherDesc}}</h2>' +
      '<p>Je {{weatherTemp}} stupňů, s rychlostí větru {{weatherWindSpeed}} m/s. <span ng-show="displaySum != 0">A součet stupňů a rychlosti větru je: {{countSum()}}</span></p>'

  }

}])