I have a basic app with just one controller. I'm trying to debug the output of the Gravatar.get() function in the console.
However, I encounter an error saying: "TypeError: Cannot read property 'get' of undefined". I'm confused because I've injected the service into both my module and controller. Am I calling the Gravatar.get() function correctly?
Below, you can find a snippet of my code along with the gravatar.js file containing the get() function.
//****************************************
//******** My simple controller**********
var main = angular.module('firebaseConfig', ['firebase', 'gravatar']);
main.run(function(){
// Initialize Firebase
//*****
//*****
//*****
//*****
});
main.controller("Ctrl", ['$scope', '$firebaseArray', '$ionicPopup', '$timeout', '$ionicLoading', '$state', '$ionicHistory', 'Gravatar', function ($scope, $firebaseArray, $ionicPopup, $timeout, $ionicLoading, $state, $ionicHistory, $cordovaImagePicker, Gravatar) {
var grav = Gravatar.get('[email protected]', 100);
console.log("Grav value:", grav);
}
//****************************************
// GRAVATAR SERVICE JS FILE :
angular.module('gravatar', [])
.service('Gravatar', [function(){
// MD5 calculation function and other methods omitted for brevity
var ret = {
'get': function(email, size){
if (!email) return;
size = size || 80;
return 'https://www.gravatar.com/avatar/' + MD5(email) + '.jpg?s=' + size;
}
}
return ret;
}])
.directive('gravatarSrc', [
'Gravatar',
function(Gravatar) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var watchVal = attrs['gravatarSrc'];
var watchSize = parseInt(attrs['gravatarSize']) || 80;
scope.$watch(watchVal, function(val) {
element.attr('src', Gravatar.get(val, watchSize));
});
}
};
}]);