1

現在、「新しい」ES6 + Angular の組み合わせを試していますが、スコープ バインディングを含むディレクティブで html 文字列を補間することに行き詰まりました。

次のオプションを試しました：

現在の状況

次のコードは機能しますが、ディレクティブの代わりにフィルターを使用しています。

HTMLファイル

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

モジュール内のフィルター (ES6 を使用しない古い学校の角度)

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

複数の要素にフィルターを追加する必要がないように、補間ロジックをディレクティブに移動しようとしている理由。

働いているが醜い状況

HTMLファイル

<interpolate value="vm.labels.hello"  scope="this"></interpolate>

指令

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

モジュール

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

望ましい状況（まだ機能していない）

HTMLファイル

<interpolate value="vm.labels.hello"></interpolate>

指令

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;

モジュール

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

要するに：私は望ましい状況で働きたいです

4

1 に答える 1

2

これを試して：

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());

ディレクティブのスコープは、依存性注入によるコントローラーのように注入されません。ディレクティブは、リンク関数の最初のパラメーターによってスコープにアクセスできます。

ディレクティブのオブジェクト プロパティによって定義されたスコープが同じではありません。スコープの分離によってディレクティブの API を作成する構成の一部です。

于 2015-10-12T22:00:22.967 に答える