Agent Zebra Agent Zebra - 5 months ago 16
AngularJS Question

Calling output from a factory from a view

I need to access the var

utc
from a view. Here's my factory that should return
utc
.

(function () {
'use strict';
angular.module('weatherapp.weatherlist')
.controller('WeatherlistController', function(utcFactory) {
var vm = this;

vm.UTC = utcFactory.myUTC();
})

.factory('utcFactory', function() {
var myUTC = function() {
var offset = -new Date().getTimezoneOffset();
var utc = ((offset > 0 ? '+' : '') + offset / 60);
return utc;
}

return {
myUTC: myUTC
}
});
})();


I've added
utcFactory
to the controller as in the below.

angular.module('weatherapp.weatherlist', ['weatherapp.locations'])
.controller('WeatherlistController', ['$scope', 'LocationService', 'WEATHER_API_URL', 'WEATHER_API_IMAGE_URL', 'WEATHER_API_ID', 'WeatherListFactory', 'utcFactory',WeatherListCtrl]);


But for some reason I cannot access the
utc
var anywhere, when I try to test for it with console log I don't see it.

I'm trying to access it using


{{utc}}`

What am I doing wrong?

Here's my html

<ion-view view-title="Whatever The Weather">
<ion-content>
<div ng-show="noLocation" class="card">
<div class="item item-text-wrap">
<div class="item">
<p>There are currently no locations available. Feel free to add new ones.</p>
</div>
</div>
</div>
<div ng-hide="noLocation" ng-repeat="weatherdata in locationData" class="card">
<div class="item item-divider icon-left weatherlist-title">
<img ng-src="{{weatherdata.weather[0].icon}}"><span>{{weatherdata.name}}, {{weatherdata.sys.country}} - {{weatherdata.weather[0].description}}</span>
</div>
<div class="item item-text-wrap">
<div class="item">
<div class="row">
<div class="col"><h2>Temperature:</h2></div>
<div class="col col-40"><b>{{weatherdata.main.temp | fahrenheit}} &deg;F / {{weatherdata.main.temp | roundme}} &deg;C</b></div>
</div>
<div class="row">
<div class="col"><h2>Sunset:</h2></div>
<div class="col col-30">{{weatherdata.sys.sunset | amFromUnix | amLocal | amDateFormat:'HH:mm a'}} <span class="tiny" ng-bind="'utc ' + weatherdata.utc"></span> </div>
</div>
<div class="row">
<div class="col"><h2>Wind Speed:</h2></div>
<div class="col col-30">{{weatherdata.wind.speed}} ms / {{weatherdata.wind.speed | mph}} mph</div>
</div>
<div class="row">
<div class="col"><h2>Humidity:</h2></div>
<div class="col col-30">{{weatherdata.main.humidity}} %</div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>

Answer

You just need to call the factory method and attribute the value to a $scope variable.

Here's is a demonstration working:

(function() {
   "use strict";
    angular.module('app', [])
     .controller('mainCtrl', function(utcFactory) {
        var vm = this;

        vm.utc = utcFactory.myUTC();
     })

    .factory('utcFactory', function() {
        var myUTC = function() {
          var offset = -new Date().getTimezoneOffset();
          var utc = ((offset > 0 ? '+' : '') + offset / 60);
          return utc;
        }

        return {
          myUTC: myUTC
        }
    });
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl as main">
  <span class="tiny" ng-bind="'UTC => ' + main.utc"></span>
</body>

</html>

I hope it helps.