1

我正在尝试使用指令在 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>
4

2 回答 2

2

好吧，我解决了这个问题，但是要付出多大的代价。其中有许多问题和角度相关。我可能不记得全部，所以这里是工作示例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;
        }
    }
}

注意使用 prelink 函数，以便在链接子项之前调用它。

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

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

// add
modelCtrl.$name = attr.name;
// before this
formCtrl.$addControl(modelCtrl);
于 2013-04-27T08:57:13.587 回答
0

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

于 2013-04-26T23:54:32.650 回答