Currently experimenting with the unique ES6 + Angular combination and facing a challenge in interpolating an html string within a directive that includes scope bindings.
We have attempted the following approach:
Current scenario
The code below is functional, but it relies on a filter instead of a directive.
HTML snippet
<div class="thumbnail-body">
<div ng-bind-html="vm.labels.hello | interpolate:this"></div>
</div>
Filter within module (traditional angular without ES6)
//TODO: .filter('interpolate', () => new InterpolateFilter())
.filter('interpolate', function ($interpolate) {
return function (text, scope) {
if (text) {
return $interpolate(text)(scope);
}
};
});
We aim to migrate the interpolation logic into a directive to eliminate the need for filters on multiple elements.
Functional but cumbersome setup
HTML snippet
<interpolate value="vm.labels.hello" scope="this"></interpolate>
Directive
class InterpolateDirective {
constructor() {
this.template = '<div ng-bind-html="value |interpolate:scope"></div>';
this.restrict = 'E';
this.scope = {value: '=',scope:'='};
}
}
export default InterpolateDirective;
Module
.directive('interpolate', () => new InterpolateDirective())
Desired setup (work in progress)
HTML snippet
<interpolate value="vm.labels.hello"></interpolate>
Directive
class InterpolateDirective {
constructor($interpolate,$scope) {
'ngInject';this.template = '<div ng-bind-html="value"> </div>';
this.restrict = 'E';
this.scope = {value: '='};
this.$interpolate = $interpolate;
this.$scope = $scope;
}
link() {
this.scope.value = this.$interpolate(this.scope.value)(this);
}
}
export default InterpolateDirective;
Module
.directive('interpolate', () => new InterpolateDirective())
To sum up: The goal is to successfully implement the desired setup.