Interpolate in ES6 + Angular 1.4 directive

Question

I am currently trying the 'new' ES6 + Angular combination and got stuck on interpolating a html string in a directive that contains scope bindings.

I have tried the following option:

Current situation

The following code works but it uses a filter instead of a directive.

HTML file

 <div class="thumbnail-body">
     <div ng-bind-html="vm.labels.hello | interpolate:this"></div>
 </div>

filter in module (still old school angular without ES6)

//TODO: .filter('interpolate', () => new InterpolateFilter())
.filter('interpolate', function ($interpolate) {
  return function (text, scope) {
    if (text) {
      return $interpolate(text)(scope);
    }
  };
});

The reason why I am trying to move the interpolate logic towards a directive so I don't have to add a filter on multiple elements.

working but ugly situation

HTML file

<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 situation (not working yet)

HTML file

<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;
  }
  //optional compile or link function
  link() {
     this.scope.value = this.$interpolate(this.scope.value)(this);
  }
}
export default InterpolateDirective;

Module

.directive('interpolate', () => new InterpolateDirective())

In short: I would like to work with the desired situation

OKey · Accepted Answer · 2016-02-24T16:07:59.613

Try this:

class InterpolateDirective {
    constructor($interpolate) {
        this.template = '<div ng-bind-html="value"> </div>';
        this.restrict = 'E';
        this.scope = {
            value: '='
        };
        this.$interpolate = $interpolate;

        InterpolateDirective.prototype.link = (scope) =>{
            scope.value = this.$interpolate(scope.value)(this);
        }
    }

    public static Factory() {
        var directive = ($interpolate) => {
            return new InterpolateDirective($interpolate);
        };
        directive['$inject'] = ['$interpolate'];
        return directive;
    }
}
export default InterpolateDirective;


.directive('interpolate', InterpolateDirective.Factory());

Scope in directives isn't injected like in controllers by dependency injection. Directive can access scope by first parameter of link function.

Scope defined by directive's object property isn't the same. It's a part of configuration to create directive's API by scope isolation.

Interpolate in ES6 + Angular 1.4 directive

1 Answers1