AngularJS 如何在模板中使用动态生成的值

Question

我有一个用 AngularJS 编写的自定义表单应用程序，现在我需要在模板中使用表单中的数据。但我尝试过的任何东西似乎都不起作用。

我正在创建这样的自定义指令...

.directive('dynamicModel', ['$compile', function ($compile) {
    return {
        'link': function(scope, element, attrs) {
            scope.$watch(attrs.dynamicModel, function(dynamicModel) {
                if (attrs.ngModel == dynamicModel || !dynamicModel) return;

                element.attr('ng-model', dynamicModel);
                if (dynamicModel == '') {
                    element.removeAttr('ng-model');
                }

                // Unbind all previous event handlers, this is
                // necessary to remove previously linked models.
                element.unbind();
                $compile(element)(scope);
            });
        }
    };
}])

这是附加到这样的表单元素..

<div class="row" ng-repeat="field in customForm.fields">
<label>{{field.displayname}}
       <input class="form-control" type="{{field.type}}" name={{field.variable}} dynamic-model="field.databind" placeholder="{{field.variable}}" required="{{field.isRequired}}"></label></div>

这部分效果很好，该字段现在以 2 种方式绑定到输入表单。但是，当我后来尝试使用相同的方法在从表单计算的报告中显示值时，我得到 "field.databind" 或充其量是解析的数据绑定字段名称，例如 "currentUser.name" 而不是值，例如"devlux"

我试过了

<div class="row" ng-repeat="field in customForm.fields">
<p>{{field.name}} = {{field.databind}}</p>
Also
<p dynamicModel="field.databind"></p>
</div>

除非我将它放入输入元素，否则什么都不起作用，这不是我在这里尝试做的。

动态模型代码是从其他人对有关创建动态表单元素的问题的回答中提取出来的，老实说，我认为这只是超出了我的理解范围。但是假设 "field.databind" 将始终是一个包含 inscope 模型名称的字符串文字，我究竟如何在普通模板中访问它？

Answer 1

{{field.databind}} 将根据当前的 $scope 进行评估，并将导致 $scope.field.databind 是什么，例如字符串 currentUser.name.

Angular 无法知道 currentUser.name 不是您想要的字符串，而是您要计算的另一个表达式。

要再次评估它，您需要向使用 $parse 服务的 $scope 添加一个函数。

例如：

$scope.parseValue = function (value) {
  return $parse(value)($scope);
};

在HTML中：

<div class="row" ng-repeat="field in customForm.fields">
  <p>{{field.displayname}} = {{parseValue(field.databind)}}</p>
</div>

传递给 parseDynamicValue 的参数例如是 currentUser.name。然后它使用 $parse 服务根据当前 $scope 计算表达式，这将导致例如 devlux.

演示： http://plnkr.co/edit/iPsGvfqU0FSgQWGwi21W?p=preview

AngularJS 如何在模板中使用动态生成的值

How to use a dynamically generated value in a template in AngularJS

forms

data-binding

templates

angularjs