Integrating simple utility functions into angular app

Question

I'm integrating a simple utility function into an angular app. How do I get the variable utc to show up on the page in my angular app? It's not showing up yet :( Here's the steps I took. Basically I guess I needed to refactor the following snippet into a service.

var offset = - new Date().getTimezoneOffset();
var utc = ((offset > 0 ? '+' : '') + offset / 60);
document.write(utc);

Here's my service... not sure if this is correct as it's not working yet.

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

Here's the controller:

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

    function WeatherListCtrl($scope, LocationService, WEATHER_API_URL, WEATHER_API_ID, WEATHER_API_IMAGE_URL, WeatherListFactory, utcFactory) {
        $scope.$on('$ionicView.enter', function(){
            $scope.locationData= [];
            //TODO Show empty String when no locations are set.
            var locations = LocationService.getLocations();
            $scope.noLocation=locations.length<1;
            if (!$scope.noLocation){
                locations.forEach(function (location) {
                    WeatherListFactory.getWeatherData(WEATHER_API_URL + 'q=' + location + '&appid=' + WEATHER_API_ID).then(function (response) {
                        response.data.weather[0].icon=WEATHER_API_IMAGE_URL+response.data.weather[0].icon+'.png';
                        $scope.locationData.push(response.data);
                    });
                });
            }
        });
    }
})();

Here's how I'm trying to bind it in the view, do I need anything else than this? <span class="tiny">{{utc}}</span>

What am I doing wrong? Is there a better way to approach this? Seems overkill for such a simple thing.

Sajal · Accepted Answer · 2016-07-05 05:29:42Z

1

The factory does not have its own scope. As you have already injected the utcFactory in the controller. Bind the return of service to $scope.utc as:

utcFactory.myUTC().then(function(results) { 
   $scope.utc = results.data;
});

answered Jul 5, 2016 at 5:29

Sajal

4,4111 gold badge22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Agent Zebra Over a year ago

Thanks. It maybe a step, but didn't fix it. Where would you put this? Does it matter? I tried it in a couple of places.

Sajal Over a year ago

Depends on where you want to use it, if you need it for the initialization part, put it at the starting of WeatherlistController or may be after some function.

Collectives™ on Stack Overflow

Integrating simple utility functions into angular app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related