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 の以降のバージョンで修正されています。正確な時期はわかりません。マスターを使用しているためです。

しかし、修正されていないのはngModelController. それは非常に早い段階で名前を取得するため、間違ったフォームの下で自分自身を公開します。私はそれを自分で修正しなければなりませんでした. file にそれを行うための行が1つしかないのは良いことですsrc/ng/directive/input.js.

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