Without default compiling | <script>
angular.module('pascalprecht.translate').directive('translate', ['$filter', '$q', '$interpolate', '$parse', '$rootScope', function ($filter, $q, $interpolate, $parse, $rootScope) {
var translate = $filter('translate');
return {
restrict: 'AE',
scope: true,
compile: function (tElement, tAttr) {
var translateValuesExist = (tAttr.translateValues && !angular.equals(tAttr.translateValues, ''));
var translateInterpolation = (tAttr.translateInterpolation) ? tAttr.translateInterpolation : undefined;
return function linkFn(scope, iElement, iAttr) {
iAttr.$observe('translate', function (translationId) {
if (angular.equals(translationId , '') || !angular.isDefined(translationId)) {
scope.translationId = $interpolate(iElement.text().replace(/^\s+|\s+$/g,''))(scope.$parent);
} else {
scope.translationId = translationId;
}
});
if (translateValuesExist) {
iAttr.$observe('translateValues', function (interpolateParams) {
if (interpolateParams) {
scope.$parent.$watch(function () {
scope.interpolateParams = $parse(interpolateParams)(scope.$parent);
});
}
});
}
var updateTranslationFn = (function () {
if (!translateValuesExist) {
return function () {
var unwatch = scope.$watch('translationId', function (value) {
if (value) {
iElement.html(translate(value, {}, translateInterpolation));
unwatch();
}
}, true);
};
} else {
return function () {
scope.$watch('interpolateParams', function (value) {
if (value) {
iElement.html(translate(scope.translationId, value, translateInterpolation));
}
}, true);
};
}
}());
var unbind = $rootScope.$on('$translateChangeSuccess', updateTranslationFn);
updateTranslationFn();
scope.$on('$destroy', unbind);
};
}
};
}]);
</script>
<div ng-app="plunker" ng-controller="AppController">
<ul>
<li ng-repeat="n in [] | range:1000">
<span translate="FOO">hhh</span>
</li>
</ul>
</div>
| ready |
with compiling | <script>
angular.module('pascalprecht.translate').directive('translate', ['$filter', '$q', '$interpolate', '$parse', '$rootScope', '$compile', function ($filter, $q, $interpolate, $parse, $rootScope, $compile) {
var translate = $filter('translate');
return {
restrict: 'AE',
scope: true,
compile: function (tElement, tAttr) {
var translateValuesExist = (tAttr.translateValues && !angular.equals(tAttr.translateValues, ''));
var translateInterpolation = (tAttr.translateInterpolation) ? tAttr.translateInterpolation : undefined;
return function linkFn(scope, iElement, iAttr) {
iAttr.$observe('translate', function (translationId) {
if (angular.equals(translationId , '') || !angular.isDefined(translationId)) {
scope.translationId = $interpolate(iElement.text().replace(/^\s+|\s+$/g,''))(scope.$parent);
} else {
scope.translationId = translationId;
}
});
if (translateValuesExist) {
iAttr.$observe('translateValues', function (interpolateParams) {
if (interpolateParams) {
scope.$parent.$watch(function () {
scope.interpolateParams = $parse(interpolateParams)(scope.$parent);
});
}
});
}
var updateTranslationFn = (function () {
if (!translateValuesExist) {
return function () {
var unwatch = scope.$watch('translationId', function (value) {
if (value) {
iElement.html($compile(translate(value, {}, translateInterpolation))(scope));
unwatch();
}
}, true);
};
} else {
return function () {
scope.$watch('interpolateParams', function (value) {
if (value) {
iElement.html($compile(translate(scope.translationId, value, translateInterpolation))(scope));
}
}, true);
};
}
}());
var unbind = $rootScope.$on('$translateChangeSuccess', updateTranslationFn);
updateTranslationFn();
scope.$on('$destroy', unbind);
};
}
};
}]);
</script>
<div ng-app="plunker" ng-controller="AppController">
<ul>
<li ng-repeat="n in [] | range:1000">
<span translate="FOO">hhh</span>
</li>
</ul>
</div>
| ready |