CODEWITHSUNDEEP
javascriptangularjsecmascript-6angularjs-interpolate
Max Sassen
Max Sassen

Reputation: 680

Interpolate in ES6 + Angular 1.4 directive

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

Upvotes: 1

Views: 463

Answers (1)

OKey
OKey

Reputation: 182

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.

Upvotes: 2

Related Questions