プレースホルダーのカスタム角度ディレクティブを作成したいと思います。
ディレクティブのコードは次のとおりです。
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")が最初に表示されない理由がわかりません。
可能であれば、どんな種類の助けも事前に感謝します。
instanceElement.onはjqueryコマンドです->コールバックの最後に$ scope。$ apply()を実行して、モデルの変更をAngularに警告します
また、instanceElement.val()ではなく、ng-model "$ scope.myVal"を使用して、入力に値を割り当てる必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加