Question

我是Angular的初学者，所以也许我认为这完全错了。

我要做的是创建一个指令，在一些样板文件html中包装输入。它应该将输入的ng-model绑定到父作用域（myForm控制器的作用域），但是应该可以访问输入的验证状态。

这是我的设置：

parent_form.html

<form name="myForm">
  <div fieldContainer label="'Field 1'" model="'field1'">
    <input type="text" ng-model="field1" required/>
  </div>
  <div fieldContainer label="'Field 2'" model="'field2'">
    <input type="text" ng-model="field2" required/>
  </div>
</form>

field_container.html

<div class="row">
   <div class="col-md-5">{{label}}</div>
   <div class="col-md-5" ng-transclude></div>
   <div class="col-md-2" ng-show="valid">REQUIRED!</div>
</div>

parent_form.js

angular.module('myApp')
  .controller('myForm', function ($scope) {
     $scope.field1 = '';
     $scope.field2 = '';
  })
  .directive('fieldContainer', function () {
    return {
      restrict: 'A',
      templateUrl: 'field_container.html',
      transclude: true,
      scope: {
        label: '=label',
        model : '=model'
      }
    }
  });

Answer 1

我得到了它的工作：

在字段中添加名称（以便Angular＆＃39;表单验证接管）
将验证邮件的public class Eintrag implements Serializable{ String name; String gebDatum; public Eintrag(String name, String gebDatum) { this.name = name; this.gebDatum = gebDatum; } @Override public String toString() { return "Eintrag{" + "name='" + name + '\'' + ", gebDatum='" + gebDatum + '\'' + '}'; }设置为：ng-show

显然，被抄送的输入仍然使用父（$parent.myForm[model].$valid）范围，并且该指令可以通过myForm访问父级的范围。

不确定这是否是最干净的方法......

最终代码如下：

scope.$parent

parent_form.html

<form name="myForm"> <div fieldContainer label="'Field 1'" model="'field1'"> <input type="text" name="field1" ng-model="field1" required/> </div> <div fieldContainer label="'Field 2'" model="'field2'"> <input type="text" name="field2" ng-model="field2" required/> </div> </form>

field_container.html

如何在angular中构建一个指令，在输入周围添加一个包装器，如果输入无效则显示消息？

1 个答案: