If we want to wait for some server data for directive loading this is the pattern:
angular.module('busuuApp.translations') .directive('trs', ['trs','$http', '$q', 'wordbee', function(trs,$http, $q,wordbee,wordbeeStrings) { 'use strict'; var translateArgs = function(str) { try { if (str[0] != '"' && str[0] != "'") { return trs.call(null, str); } else { // Strips the " or ' on the start and end // Used to be eval("trs(" + str + ")"); return trs(str.slice(1, str.length-1)); } } catch (err) { $log.error('Reference error, trs directive shouldn\'t have dynamic vars: ' + args); throw err; } }; //store the data so you don't load it twice. var directiveData, //declare a variable for you promise. dataPromise; //set up a promise that will be used to load the data function loadData(){ //if we already have a promise, just return that //so it doesn't run twice. if(dataPromise) { return dataPromise; } var deferred = $q.defer(); dataPromise = deferred.promise; if(!_.isEmpty(wordbeeStrings)) { //if we already have data, return that. deferred.resolve(directiveData); } else { console.log("TRS directive loadlanguage"); wordbee.loadLanguage(interfaceLanguage) .then(function(data) { directiveData = data; wordbeeStrings = directiveData; _.each(wordbeeStrings, function (val, key) { val = val.replace(/</g, '<'); val = val.replace(/>/g, '>'); wordbeeStrings[key] = val; }); console.log("trs directive Language loaded!!!"); deferred.resolve(directiveData); }); } return dataPromise; } return { restrict: 'EA', scope: false, link: function(scope, elm, attrs) { //load the data, or check if it's loaded and apply it. loadData().then(function(data) { //success! set your scope values and // do whatever dom/plugin stuff you need to do here. // an $apply() may be necessary in some cases. //console.log("TRS directive --> ",attrs); if (attrs.hasOwnProperty('trs')) { elm.html(translateArgs(attrs.trs)); } else { // otherwise we use <trs> </trs> syntax elm.replaceWith(translateArgs(elm.text())); } }, function() { //failure! update something to show failure. // again, $apply() may be necessary. scope.data = 'ERROR: failed to load data.'; }); } }; }]);