Angularjs inject a service into a directive

Question

I need to inject a service into a directive. here is what I currently have. I am injecting configFactory into the directive

app.directive('googleAnalytics', function(configFactory){ 
  return {
    restrict: 'E',
    replace: true,
    link : function(scope,element,attrs){
      scope.configs = configFactory.getconfigs();
      console.log(scope.configs);
    },
    template: function(elem, attr){
      return "<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', '', 'auto');</script>"
    }
  }
})

Here is what my console.log looks like

Promise {$$state: Object}
  $$state:Object
    status:1
    value:Array[1]
      0:Object
        a1:"Survivor"
        a2:"Patient"
        button_name:"DONATE TODAY"
        company_clr_1:"#46b8da"
        ga_id:"UA-XXXXXXXX-1"

How do I get ga_id ? I need to insert its value here: ga('create', 'ga_id', 'auto')

here is what the Service looks like:

app.factory('configFactory', function($rootScope, $log, $q, $http, Data) {
    var configs= {};
        configs.getconfigs=function(){
            var deferred = $q.defer();

            Data.get('config').then(function(data){
                deferred.resolve(data.data);
            });
                return deferred.promise;
        } 
    return configs;
});

Answer 1

configFactory.getconfigs() returns a promise so you should use

configFactory.getconfigs().then(function(configs) {
    scope.configs = configs;
});

I would also execute the GA code in the same place instead of using the template. I have a feeling the latter is not going to work very well.

Answer 2

Jason. Because your Service return deffered.promise so you can use then function to get this value. Here is my code:

app.directive('googleAnalytics', function(configFactory){ 
  return {
    restrict: 'E',
    replace: true,
    link : function(scope,element,attrs){
      configFactory.getconfigs().then(function(configs) {
        scope.configs = configs;
      });
      scope.configs.forEach(function(config){
        console.log(config.ga_id);
      })
    },
    template: function(elem, attr){
      return "<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', '', 'auto');</script>"
    }
  }
})