5

内部で を使用するカスタム オートコンプリート ディレクティブを作成してい<input>ますが、'required' 属性を渡す方法を理解するのに少し苦労しています。設定されているかどうかに関係なく、空白になります。以下の私のリターンステートメントの最初の部分：

return {
            restrict: 'E',
            template: tpl,
            replace: true,
            scope: {
                suggestionsPath: '=autoComplete',
                method: '@method',
                term: '@term',
                required: '@required',
                ngModel: "="
            }...

ありがとう！

4

3 に答える 3

4

入力に対していくつかの拡張機能を構築しましたが、既存の ngModel バインディングを拡張する最良の (ほぼ間違いなく) 唯一の方法は、ディレクティブで ngModelController を使用することです。「require」プロパティを使用して、別のディレクティブのコントローラーを要求できます。ngModelControllerのドキュメントはこちら

これにより、モデル値を取得/設定したり、必要に応じて検証動作を拡張または置換したりできます。AngularJS の入力ディレクティブを組み合わせて拡張している可能性があるため、これがどのように機能するかの例として、AngularJS 内の入力ディレクティブも調べたいと思うでしょう。また、フォーム全体の親として ngFormController と接して動作することもできます。これを理解するのにしばらく時間がかかりましたので、しばらくお待ちください。

ここでスコープを分離することは避けます。それらはトリッキーになる可能性があり、他のディレクティブと常にうまく連携するとは限りません (したがって、通常は、新しい要素またはディレクティブが 1 つだけ存在するものにのみ使用します)。私は次のようなものを設計します：

return {
        restrict: 'E',
        template: tpl,
        replace: true,
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController) {
           // Use attrs to access values for attributes you have set on the lement
           // Use ngModelController to access the model value and add validation, parsing and formatting
           // If you have an attribute that takes an expression you can use the attrs value along with $scope.$watch to check for changes and evaluate it or the $parse service if you just want to evaluate it.
        }

カスタム入力は、その機能によっては非常にトリッキーになる可能性があるため、ディレクティブの設計にできるだけ慣れることをお勧めします (+/- ボタンを追加するカスタム入力と、数値をパーセンテージ、通貨、または単に数値としてフォーマットするカスタム入力を構築しました。カンマを入力しながら）。ngModelController ドキュメントとは別に、これらはレビューに役立ちます。

于 2013-10-15T21:39:41.577 に答える
2

これは古い質問であることは知っていますが、見に来る他の人にとっては（これが私がここにたどり着いた方法です）：

必要なタグをディレクティブに渡してブール値として読み取らせ、その値を ng-required で使用できます。

return {
    restrict: 'E',
    template: tpl,
    replace: true,
    scope {
        required:'@'
    }

次に、ディレクティブ テンプレートで次のように使用します。

<input type="text" ng-required="required" />

属性「required」が見つかり、ディレクティブで true に設定されているか、属性が見つからず、ng-required によって false 値として解釈されます

于 2015-08-10T19:50:43.187 に答える