设置angularjs输入指令的名称作为变量 [英] Set angularjs input directive name as a variable

问题描述

我试图像集

<form name="myForm">
    <input name="{{ name }}"/>
</form>

它的工作原理在DOM。我看

It works in the dom. I see

<input name="whatever_name_is_set_to"/>

然而，在我的ngForm我有

However in my ngForm I have

$scope.myForm:  { 
    {{ name }}:  {  } 
} 

卫生署

我为什么这样做呢？我试图创建一个指令，这样我可以以编程建立我的方式。然后，我可以做这样的事情。

Why am I doing this? I'm trying to create a directive so that I can build my forms programmatically. Then I can do something like

<div my-field
        name="credits"
        field="course.credits"
        field-options="courseOptions.credits"
        title="Credits"
></div>

Plunker

推荐答案

我昨天刚回答了一个类似的问题<一href=\"http://stackoverflow.com/questions/24020503/angular-ng-repeat-with-ng-form-accessing-validation-in-controller/24050297#24050297\">about动态命名的表单元素的。总之，不，你不能使用插值来动态命名您的窗体域 - 插值字符串将在字段名称最终成为你看过

I just answered a similar question yesterday about dynamically named form elements. In short, no, you can't use interpolation to dynamically name your form fields - the interpolation string will end up in the field name as you have seen.

在你的情况，你可能会需要寻找到动态编译 MyField的指令内输入HTML。

In your case you're probably going to need to look into dynamically compiling the input HTML inside your myField directive.

下面是一个使用 $编译来动态生成表单元素一个简单的例子：的 http://jsfiddle.net/Sly_cardinal/XKYJ3/

Here is a simplified example using $compile to dynamically generate form elements: http://jsfiddle.net/Sly_cardinal/XKYJ3/

HTML：

<div ng-app="myApp">
    <form name="myForm" ng-controller="myController">
        <div my-field 
             name="courseName"
             field="course.courseName"
             title="Course Name"></div>

        <div my-field 
             name="credits"
             field="course.credits"
             title="Credits"></div>

        <!-- Show that the values are bound. -->
        <pre>course: {{course | json:'  '}}</pre>
        <!-- Show that the field is being registered with the ngFormController. -->
        <pre>myForm.credits.$dirty: {{myForm.credits.$dirty}}</pre>
    </form>
</div>

JavaScript的：

angular.module('myApp', [])
.controller('myController', ['$scope', function($scope){
    $scope.course = {
        credits: 100,
        courseName: 'Programming 201'
    };
}])
.directive('myField', ['$compile', '$parse', function($compile, $parse){
    // In a real project you'd probably want to use '$templateCache' instead
    // of having strings in your code.
    var tmpl = $compile('<label>{{title}}</label>');

    return {
        scope: true,
        link: function(scope, element, attr){
            scope.title = attr.title;

            var newEl = angular.element('<input type="text"/>');
            newEl.attr('ng-model', attr.field);
            newEl.attr('name', attr.name);

            tmpl(scope, function(fieldEl, scope){
                $compile(newEl[0].outerHTML)(scope, function(el, scope){
                    fieldEl.append(el);
                    element.append(fieldEl);
                });
            });
        }
    }
}]);

的这个例子的说明：的

这是一个非常特殊的情况 - 生成动态表单元素 - 这需要使用 $的编译。这不是与角输入表单时去的解决方案 - 角将处理所有与指令中的常见情况，数据绑定和其他一切的框架提供。此外，由于马克·克莱恩的评论节目，它看起来像在某个点角将处理动态表单管理本身在未来的某一时刻。

This is a very specific situation - generating dynamic form elements - that requires the use of $compile. This is not the "go to" solution when working with Angular inputs and forms - Angular will handle all the common situations with directives, data-binding and everything else the framework provides. Plus, as Marc Kline's comment shows, it looks like at some point Angular will handle dynamic form management itself at some point in the future.

如果你使用继续向下的路径 $编译来生成这些表单元素，那么你可能会想使用的 $ templateCache 来管理你的模板，这样你就不会试图管理您的指令里面的模板字符串。

If you were to continue down the path using $compile to generate these form elements then you'd probably want to use the $templateCache to manage your templates so you're not trying to manage template strings inside your directive.

这篇关于设置angularjs输入指令的名称作为变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！