My approach is this it is translating one time when i applied on element on angular template but when i applied multiple directive as template making multiple time api call so how to avoid it. good solution please comment
var directive = {
restrict: 'AE',
scope: false,
multiElement: true,
link: link
};
$rootScope.cityName = cookieService.getCookie('lang');
$rootScope.translateThese = [];
$rootScope.translationData = '';
$rootScope.translationCounter = 0;
function link(scope, element, attr) {
scope.$evalAsync(function() {
$rootScope.translateThese.push(element[0]);
scope.$on('translateAPISuccess', function(e, data) {
angular.forEach($rootScope.translateThese, function(elem) {
var translatedString = $rootScope.translationData[elem.innerHTML.trim().toLowerCase()];
elem.innerHTML = translatedString;
// $compile(element.contents())(scope);
})
})
});
// This is a 0 second timeout to push the execution of this
// directive to the next digest cycle where all the dynamic values
// are present. I can also use scope.$evalSync for this purpose.
//
// @example
// $timeout(function() {
//
$timeout(function() { // We could also use scope.$watch here watching $viewContentLoaded // scope.$watch('$viewContentLoaded', function(e, u) {
$rootScope.translationCounter++;
var translateThese = [];
// if (scope.$last === true && scope.translationCounter === $rootScope.translateThese.length) { //we can use this but scope.$last isn't working
if ($rootScope.translationCounter === $rootScope.translateThese.length) {
$rootScope.translateThese.forEach(function(sentence) {
// trim.apply(sentence).split(" ").forEach(function(v) {
translateThese.push(sentence.innerHTML.replace(/[^a-zA-Z ]/g, ""));
// })
})
dataService.staticTranslation('guj', translateThese).then(function (response) {
$rootScope.translationData = response.response;
scope.$emit('translateAPISuccess', response.response);
// When using the translateAPI from horizontal
// $rootScope.translationData = JSON.parse(response.response).StaticLangTranslationApplicationResponse.StaticLangTranslationApplication.translations;
// scope.$emit('translateAPISuccess', JSON.parse(response.response).StaticLangTranslationApplicationResponse.StaticLangTranslationApplication.translations);
});
}
});
}
return directive;
}
