2

フォーム内のすべての入力フィールドで素晴らしいことを行うディレクティブを作成したいと思います。

<form>ただし、そのディレクティブをすべてのにバインドするのではなく、(それ自体に) <input>1回だけ適用できれば幸いです。

フォームのすべての入力要素を決定するにはどうすればよいですか?

考えられる解決策がいくつかあります。

element[0].childNodes  // filter all inputs
element[0].children
element[0].elements   // seems to contain nothing but the stuff i want

多分私は心を閉ざしていて、ここで正しい解決策が見えません。

どんな助けや意見も大歓迎です

4

2 に答える 2

3

警告: これは、些細な例で機能するアイデアにすぎません。私はそれが間違っていると言っているわけではありません (ただし、これは議論の余地があります) が、より複雑なコンテキストで使用したことはありません。

したがって...実際に 2 番目のinputディレクティブを作成し、別のディレクティブ (たとえばmyDirective) が外側のフォームに適用された場合にのみ適用することができます。

2 つのフォームがあるとします。

<body>
    <form name="myForm1" ng-controller="MainCtrl">
      Name: <input id="name1" type="text" ng-model="data.name" /><br/>
      Surname: <input id="surname1" type="text" ng-model="data.surname" />
      <pre>{{data}}</pre>
    </form>
    <br/>
    <form name="myForm2" ng-controller="MainCtrl" my-directive>
      Name: <input id="name2" type="text" ng-model="data.name" /><br/>
      Surname: <input id="surname2" type="text" ng-model="data.surname" />
      <pre>{{data}}</pre>
    </form>
</body>

でタグ付けされているのは 2 番目のフォームだけmy-directiveです。これで、ディレクティブは次のようになります。

app.directive("myDirective", function(){
    return {
        restrict: 'A',
        require: ['form'],
        controller: function() {
          // nothing here
        },
        link: function(scope, ele, attrs, controllers){
          var formCtrl = controllers[0];
          console.log("myDirective applied to form:", formCtrl.$name);
        }
    };
});

app.directive("input", function(){
    return {
        restrict: 'E',
        priority: -1000,
        require: '^?myDirective',
        link: function(scope, ele, attrs, ctrl){
          if (ctrl) {
            console.log("applying custom behaviour to input: ", ele.attr('id'));
            // ... awesomeness here
          }
        }
    };
});

ライブを見て、ログをチェックしてください。元のinputディレクティブは、独自のディレクティブと共存します。その証拠は、フォームが引き続き機能することです (入力すると、モデルが更新されます。それがの仕事inputであり、次にngModelの仕事です)。

ディレクティブは、 ngModelinputを使用して入力値を操作することもできます。

app.directive("input", function(){
    return {
        restrict: 'E',
        priority: -1000,
        require: ['?ngModel', '^?myDirective'],
        link: function(scope, ele, attrs, ctrls){
          var ngModel = ctrls[0];
          var myDirective = ctrls[1];
          if (myDirective) {
            console.log("applying custom behaviour to input: ", ele.attr('id'));
            // ... awesomeness here
          }
        }
    };
});
于 2013-11-07T10:07:22.977 に答える
2

Angular のjqLit​​e (またはロードすることを選択した場合は jQuery) を使用しない理由

angular.forEach(element.find('input'), function(node){ 
 awesomize(node)
});
于 2013-11-07T08:50:29.160 に答える