在 ES6 + Angular 1.4 指令中插入
Interpolate in ES6 + Angular 1.4 directive
我目前正在尝试 'new' ES6 + Angular 组合,但在包含范围绑定的指令中插入 html 字符串时卡住了。
我尝试了以下选项:
现状
以下代码有效,但它使用过滤器而不是指令。
HTML 文件
<div class="thumbnail-body">
<div ng-bind-html="vm.labels.hello | interpolate:this"></div>
</div>
模块中的过滤器(仍然是老派angular,没有 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.
工作但丑陋的情况
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())
简而言之:我想在理想的情况下工作
试试这个:
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());
指令中的作用域不像控制器中那样通过依赖注入注入。指令可以通过 link 函数的第一个参数访问范围。
指令对象 属性 定义的范围不同。通过范围隔离创建指令的 API 是配置的一部分。
我目前正在尝试 'new' ES6 + Angular 组合,但在包含范围绑定的指令中插入 html 字符串时卡住了。
我尝试了以下选项:
现状
以下代码有效,但它使用过滤器而不是指令。
HTML 文件
<div class="thumbnail-body">
<div ng-bind-html="vm.labels.hello | interpolate:this"></div>
</div>
模块中的过滤器(仍然是老派angular,没有 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.
工作但丑陋的情况
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())
简而言之:我想在理想的情况下工作
试试这个:
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());
指令中的作用域不像控制器中那样通过依赖注入注入。指令可以通过 link 函数的第一个参数访问范围。
指令对象 属性 定义的范围不同。通过范围隔离创建指令的 API 是配置的一部分。