Question

我正在尝试使用指令在AngularJS中执行一个小的可重用组件。我取得了很好的进展，但我的验证有问题。例如，所需的验证不起作用。我认为是“约束力”问题。

我的HTML代码：也在http://jsfiddle.net/pQwht/17/

<html ng-app="myApp">
<body>
<form ng-controller="Ctrl"
  id="paymentCallForm"
  action="#"
  name="paymentCallForm">
  <table>
   <tr tdfield 
      labelname="Primary Account Number:" 
      fieldname="primaryAccountNumber"
      title="Primary title" 
      >
    </tr>  
  </table>

我的指令脚本：

 angular.module('myApp').directive('tdfield', function() {
    return {
    restrict: 'A',
    replace:false,
    transclude: false,
    scope: { labelname: '@', fieldname: '@', title: '@'},
    templateUrl:'element.html'
  };
 });

我的element.html代码：

 <td id="lbl_paymentReference" class="formInputLabelWrapper">{{labelname}}</td>
 <td class="formInputTextWrapper">
   <input id="{{fieldname}}"
     name="{{fieldname}}"
     title="{{title}}" 
     class="large empty"  
     required>
<span data-ng-show="paymentCallForm.{{fieldname}}.$error.required"
    class="error">Error</span></td>

Answer 1

嗯，我解决了这个问题，但价格是多少。它们之间存在许多问题和角度相关。我可能不记得所有，所以这是工作示例https://github.com/yaroslav-ulanovych/soq16245177。

当您定义scope参数（如scope: { labelname: '@', fieldname: '@', title: '@'},（将对象作为值）时，会创建一个独立的范围，这意味着不会从父级继承。因此，ng-show="paymentCallForm.{{fieldname}}.$error.required"无法访问表单。作为一种解决方法ng-show="$parent.paymentCallForm.{{fieldname}}.$error.required"，但是在隔离范围的情况下，我没有检查您的输入是否在表单中发布。或scope: true并手动将属性注入范围。

compile: function() {
    return {
        pre: function (scope, element, attr) {
            scope.fieldname = attr.fieldname;
        }
    }
}

关于使用预链接功能的注意事项，以便在链接子项之前调用它。

下一个ng-show实际上将使用非插值表达式，并且表单中显然没有名为{{fieldname}}的属性。这是在Angular的更高版本中修复的，不知何时确切，因为我正在使用master。

但未修复的是ngModelController。它很早就得到它的名字，所以在错误的表格上发表自己。我必须自己解决这个问题，很好，在文件src/ng/directive/input.js中只有一行可以做到这一点。

// add
modelCtrl.$name = attr.name;
// before this
formCtrl.$addControl(modelCtrl);

Answer 2

我相信您需要一个附加到您视图的控制器。表单对象将附加到具有此控制器的$scope对象上的表单的id的属性。一旦你添加它，我认为它将开始出现。

验证消息到指令 - AngularJS

2 个答案: