如何使用angularjs模板来设置字段名 [英] how to set the fieldname using a template in angularjs

问题描述

我想有标签的一些互动与现场验证属性的字段。
我创建了一个工作示例的plunker。

I want to have some interaction of the label for a field with the field validation properties. I created a plunker of a working example.

http://plnkr.co/edit/oNq5lmjtjRDaEkzKsrR2?p=$p$ PVIEW

但是，在这个例子中，字段名是硬$ C $光盘。

But in this example the fieldname is hardcoded.

我trye​​d通过范围变量字段名设置成模板。这是行不通的：

I tryed to set the fieldname via scope variable into the template. This is not working:

http://plnkr.co/edit/yEl04xyFR5RWYCmI2bMH?p=$p$ PVIEW

HTML

<form name="myForm" ng-controller="ctrl">
  <fieldset field-name="{{model.fieldName}}" label-text="{{model.label}}" ng-model="model.value">
  <fieldset>
</form>

JavaScript的：

JavaScript:

var app = angular.module('myApp',[]);
app.directive('fieldset', function(){
  return {
    template: '<label ng-class="{invalid:$parent.myForm[{{fieldName}}].$invalid}">{{lbl}}</label>: ' +
              '<input name="{{fieldName}}" ng-model="value" required>',
    restrict : 'E',
    scope : {
              value : '=ngModel',
              lbl : '@labelText',
              fieldName : '@'
            },

    link : function(scope, elem, attrs) {
      console.log(scope.$parent.myForm);
    }        
  }
})

app.controller('ctrl', function($scope) {
  $scope.model = {
    fieldName : 'myField',
    label : 'Label for Field',
    value : 6
  } 
});

在范围内。$ parent.myForm的字段名是{{字段名}}'而不是'MyField的。但在DOM预期的字段名分配。
我怎样才能解决这个问题？

The fieldname in scope.$parent.myForm is '{{fieldName}}' instead of 'myField'. But in DOM the fieldname is assigned as expected. How can I solve this problem?

推荐答案

的Stewie是绝对正确的。如果创建NG模型的指令，将立即在形式注册。如果你看一下角来源，你会发现ngModels由他们的当前名字数组中注册格式：

Stewie is absolutely right. If the ng-model directive is created it will immediately be registered at the form. If you have a look at the angular sources you will find that the ngModels are registered by their current name in the array form:

if (control.$name) {
  form[control.$name] = control;
}

在你的情况，这是{{字段名}}。这名称不能被改变，因为它是数组中的关键。所以，我们能做些什么来改变呢？如果我们看一下<大骨节病> 的FormController API 我们可以看到有函数删除（ $ removeControl ）或增加（ $的AddControl ）控制。这两个功能都需要NgModelController作为输入参数。例如。在NgModelController的角度对我们的输入元素创建。我们必须通过访问该控制器：

In your case this is '{{fieldName}}'. This name can not be changed, because it is the key in the array. So what can we do to change this? If we have a look at the FormController API we can see there are functions to remove ($removeControl) or add ($addControl) controls. Both functions require the NgModelController as input parameter. E.g. the NgModelController that angular has created for our input element. We have access to this controller by:

VAR modelController = inputElement.controller（'ngModel'）;

var modelController = inputElement.controller('ngModel');

我认为我们现在拥有的所有信息，共同谱写了指令：

I think we have now all information together to write the directive:

app.directive('fieldset', function(){
  return {
    template: '<label ng-class="{invalid:form[fieldName].$invalid}">{{lbl}}</label>: ' +
              '<input name="{{fieldName}}" ng-model="value" required>',
    restrict : 'E',
    require: '^form', // we need the parent NgFormController 
    scope : {
              value : '=ngModel',
              lbl : '@labelText',
              fieldName : '@'
         },

    link : function(scope, elem, attrs, formCtrl) {
       // get the NgModelController for the input element
       var modelCtrl = elem.find('input').controller('ngModel');

       // remove the ModelController from the FormController
       formCtrl.$removeControl(modelCtrl); 
       // set the right name
       modelCtrl.$name = scope.fieldName; 
       // add the namend ModelController to the FormController
       formCtrl.$addControl(modelCtrl); 

       // publish the FormController to the scope - so we don't need to mess around with the parent scope.
       scope.form = formCtrl;
    }
  }
})

我也建议公布NgFormController的指令范围。所以，你可以写你的CSS条件：

I would also suggest publish the NgFormController to the directives scope. So you may write your css condition:

form[fieldName].$invalid

的instad：

instad of:

$parent.myForm[fieldName].$invalid

这是更通用的，因为你并不需要知道你的表单的名称。

It is more generic, because you don't need to know the name of your form.

<大骨节病> PLUNKR

这篇关于如何使用angularjs模板来设置字段名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！