角度ディレクティブ内の要素の値を設定する

ジェニッシュ・ラバディヤ

プレースホルダーのカスタム角度ディレクティブを作成したいと思います。

ディレクティブのコードは次のとおりです。

class customDirective {

restrict: string = "A";
link = (scope: ng.IScope,
    instanceElement: ng.IAugmentedJQuery,
    instanceAttributes: ng.IAttributes,
    controller: any,
    transclude: ng.ITranscludeFunction) => {
    instanceElement.val((<any>instanceAttributes).tsplaceholder);
    instanceElement.on("focus", (eventObj: JQueryEventObject) => {
        if (instanceElement.val() === (<any>instanceAttributes).tsplaceholder) {
            instanceElement.removeClass("gray-textbox");
            instanceElement.val("");
        }
    });

    instanceElement.on("blur", (eventObj: JQueryEventObject) => {
        if (instanceElement.val() === "") {
            instanceElement.addClass("gray-textbox");
            instanceElement.val((<any>instanceAttributes).tsplaceholder);
        }
    });
    instanceElement.addClass("gray-textbox");
    //instanceElement.attr("value", (<any>instanceAttributes).tsplaceholder);
    //this.$compile(instanceElement.contents())(scope);
}

}

taxSimpleApp.directive("tsplaceholder", () => {
return new customDirective();
});

以下のhtmlコードを使用しています。

<input name="ssn2"
      id="jenish"
      type="text"
      required                               
      ng-model="myVal" 
      tsplaceholder="XXX-XX-XXXX">

私はtypescriptでangularを使用しています。

ただし、上記の例では、最初のビューが読み込まれるときに、valueプロパティが渡されたプレースホルダーに設定されます。しかし、最初の焦点が失われた後、それは突然働き始めます。

value( "XXX-XX-XXXX")が最初に表示されない理由がわかりません。

可能であれば、どんな種類の助けも事前に感謝します。

koolunix

instanceElement.onはjqueryコマンドです->コールバックの最後に$ scope。$ apply()を実行して、モデルの変更をAngularに警告します

また、instanceElement.val()ではなく、ng-model "$ scope.myVal"を使用して、入力に値を割り当てる必要があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

角度ディレクティブプロパティのデフォルト値を設定する

分類Dev

ディレクティブ内の要素幅を角度の方法で取得する

分類Dev

ディレクティブを使用してキャメルケースの要素の属性値を設定する

分類Dev

要素の幅を計算する-角度ディレクティブ

分類Dev

チェックボックスのスタイルを設定する角度ディレクティブ

分類Dev

別のディレクティブ内の要素を処理するための属性ディレクティブ

分類Dev

要素の属性を角度ディレクティブに追加する方法

分類Dev

角度ディレクティブで現在のdom要素を取得する方法

分類Dev

AngularJSディレクティブのルート要素のスタイルを設定する

分類Dev

動的ディレクティブ内の入力フィールドにngModelを設定する方法

分類Dev

ディレクティブを使用して要素のフォーカスを設定する

分類Dev

jquery:角度のある* ngIfディレクティブ内の要素にアクセスする

分類Dev

ngClickディレクティブ内の要素を取得します

分類Dev

AngularディレクティブのLink関数内でCSSスタイルを設定する方法

分類Dev

AngularJS ディレクティブ - 制限: 'A' およびそのディレクティブを値に設定

分類Dev

要素の .html() 内のコントローラー関数に引数を渡す角度ディレクティブ

分類Dev

ディレクティブ内の要素の外側の角度クリック

分類Dev

systemd:PATHを設定するための「環境」ディレクティブ

分類Dev

Angularの属性ディレクティブにhrefを設定する

分類Dev

AngularJS選択要素のアクティブオプションを別の角度オブジェクトの値に設定する

分類Dev

角度-ディレクティブ内のフォーム要素間で動的に変化する検証要件

分類Dev

MatButtonToggleGroupディレクティブにデフォルト値を設定する

分類Dev

CentOSでユーザーディレクティブのディレクトリを設定する方法

分類Dev

ディレクティブのリンク関数の値をAngularJsモデルに設定します

分類Dev

角度ディレクティブで他のモデル値を見る

分類Dev

vueディレクティブの要素を削除する方法

分類Dev

ディレクティブ定義の他のディレクティブ内にディレクティブを追加します

分類Dev

textAngularディレクティブの最初の前に$ rootScopeを設定します

分類Dev

angleJsディレクティブのリンク関数内の要素タグの座標を取得する方法

Related 関連記事

  1. 1

    角度ディレクティブプロパティのデフォルト値を設定する

  2. 2

    ディレクティブ内の要素幅を角度の方法で取得する

  3. 3

    ディレクティブを使用してキャメルケースの要素の属性値を設定する

  4. 4

    要素の幅を計算する-角度ディレクティブ

  5. 5

    チェックボックスのスタイルを設定する角度ディレクティブ

  6. 6

    別のディレクティブ内の要素を処理するための属性ディレクティブ

  7. 7

    要素の属性を角度ディレクティブに追加する方法

  8. 8

    角度ディレクティブで現在のdom要素を取得する方法

  9. 9

    AngularJSディレクティブのルート要素のスタイルを設定する

  10. 10

    動的ディレクティブ内の入力フィールドにngModelを設定する方法

  11. 11

    ディレクティブを使用して要素のフォーカスを設定する

  12. 12

    jquery:角度のある* ngIfディレクティブ内の要素にアクセスする

  13. 13

    ngClickディレクティブ内の要素を取得します

  14. 14

    AngularディレクティブのLink関数内でCSSスタイルを設定する方法

  15. 15

    AngularJS ディレクティブ - 制限: 'A' およびそのディレクティブを値に設定

  16. 16

    要素の .html() 内のコントローラー関数に引数を渡す角度ディレクティブ

  17. 17

    ディレクティブ内の要素の外側の角度クリック

  18. 18

    systemd:PATHを設定するための「環境」ディレクティブ

  19. 19

    Angularの属性ディレクティブにhrefを設定する

  20. 20

    AngularJS選択要素のアクティブオプションを別の角度オブジェクトの値に設定する

  21. 21

    角度-ディレクティブ内のフォーム要素間で動的に変化する検証要件

  22. 22

    MatButtonToggleGroupディレクティブにデフォルト値を設定する

  23. 23

    CentOSでユーザーディレクティブのディレクトリを設定する方法

  24. 24

    ディレクティブのリンク関数の値をAngularJsモデルに設定します

  25. 25

    角度ディレクティブで他のモデル値を見る

  26. 26

    vueディレクティブの要素を削除する方法

  27. 27

    ディレクティブ定義の他のディレクティブ内にディレクティブを追加します

  28. 28

    textAngularディレクティブの最初の前に$ rootScopeを設定します

  29. 29

    angleJsディレクティブのリンク関数内の要素タグの座標を取得する方法

ホットタグ

アーカイブ