0

我希望允许用户在应用程序中编辑表单，例如设置字段的标签，但我希望用户享受 Angular 的插值功能来创建动态表单。

当涉及到标签时，这很容易，带有服装指令

但是当涉及到属性时，这更加困难。假设我想让用户为一个问题设置一个相关方程，例如movieRating.relevant='{{seenMovie===true}}'。

我目前通过在插值变量上调用 interpolate 来解决这个问题。

模板：

<div class="control-group" ng-show="interpolate('{{ movieRating.relevant }}')">
    <!--  field html -->
</div>

指令/控制器：

scope.interpolate = function(text, mustHaveExpression, trustedContext) {
    $interpolate(text, mustHaveExpression, trustedContext)(scope)
}

我正在寻找一种更 Angular 的方式来做到这一点（$compile例如可以使用的方式）。

4

2 回答 2

0

创建一个 Angular过滤器，为您进行插值并且可以在任何地方重复使用：

angular
  .module(...)
  .filter(
    'interpolate',
    ['$parse', $parse => (name, scope) => $parse(name)(scope)]
  );

...然后在您的模板中使用它：

<div ng-show="movieRating.relevant | interpolate:this">

瞧！

于 2018-04-21T23:26:57.433 回答
0

最好的方法是按照ccjmne的建议在其上使用管道

<div ng-show="movieRating.relevant | interpolate:this">

我已经详细说明了以下示例中的代码不要忘记在@NgModule 中导出和声明管道

html

<a [href]="this.$urlProjectDetails | interpolate:this" target="_blank">

自定义管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'interpolate' })
export class InterpolatePipe implements PipeTransform {

// {{ context.url | interpolate:this}}
transform(
    text    : string,
    scope   : object,
    props   : object = {} // OverWrite this
): string {
    return this.interpolate(
        text,
        scope,
        props
    )
  }


      interpolate(stringToInterpolate : string, scope : object, props : object = null) {

        var LOCAL = {
            oSource : scope,// should be = this
            value : null,
            foundValue  : true
        }
        return stringToInterpolate.replace(/\${(.*?)\}/g, function(match, expr : string) {

            //try props for the value
            LOCAL.value = props || {};
            expr.split('.').some( currentExpr=>{
                if(currentExpr in LOCAL.value){
                    LOCAL.value = LOCAL.value[currentExpr];
                    return false;
                } else {
                    LOCAL.foundValue = false;
                    LOCAL.value = '';
                    return true;// stop execution of array with some()
                }
            })

            //if we did not found a value in the given props, find it in the this scope
            if(!LOCAL.foundValue){
                LOCAL.value = LOCAL.oSource
                expr.split('.').some( currentExpr=>{
                    if(currentExpr in LOCAL.value){
                        LOCAL.value = LOCAL.value[currentExpr];
                        return false;
                    } else {
                        LOCAL.foundValue = false;
                        LOCAL.value = '';
                        return true;// stop execution of array with some()
                    }
                })
            }

            return LOCAL.value
        });
    };
}
于 2019-08-30T16:45:07.890 回答