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不是您想要的字符串，而是实际上您要评估的另一个表达式。

要再次评估它，您需要向使用$scope服务的$parse添加一项功能。

例如：

$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中的模板中使用动态生成的值

1 个答案: