質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

解決済

(Angular6)カスタムしたdirectiveを動的にタグに埋め込みたい

hiromi.a
hiromi.a

総合スコア9

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

2回答

0評価

0クリップ

3278閲覧

投稿2018/08/19 15:01

編集2018/08/21 23:57

https://ja.stackoverflow.com/questions/47643/angular-%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%81%97%e3%81%9fdirective%e3%82%92%e5%8b%95%e7%9a%84%e3%81%ab%e3%82%bf%e3%82%b0%e3%81%ab%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e3%81%9f%e3%81%84
この質問は上記のサイトでも質問しています。

前提・実現したいこと

Angular6で、複数の画面で共通のdirectiveを使おうと思っています。
複数のプログラマーがテンプレートに個々にdirectiveを埋め込むと抜け漏れが発生するので、
name="corp_name"のinputタグの場合、必ず"HanToZen"というdirectiveを埋め込む様に
ngOnInitで実装したいのですが、うまくいきません。
試したコードは下記です。
setAttributeした後にテンプレートをコンパイルしなおさないといけないのでしょうか。
その場合、テンプレートをコンパイルし直すにはどうすれば良いのでしょうか。
色々調べてはいるのですが未だに解決出来ていません。
どなたかご教授頂けるととても助かります。どうぞよろしくお願いします。

※directiveで呼んでいるconvertHAN2ZENは受け取った文字列の半角文字を全角に変換するだけの関数です。
directiveが有効になる方法が分かれば、処理の内容は何でもいいので省略させて頂きました。

試したこと

directive-test.component.ts

Angular

import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core'; @Component({ selector: 'app-directive-test', templateUrl: './directive-test.component.html', styleUrls: ['./directive-test.component.css'] }) export class DirectiveTestComponent implements OnInit { element: HTMLElement; constructor(private el: ElementRef,private renderer: Renderer2) { this.element = el.nativeElement; } ngOnInit() { // 単純にHTMLelementにZenToHanをsetしてみると、DOMは期待通りになるのですがdirectiveが動きませんでした var input = this.element.getElementsByTagName("input"); for (var i = 0; i < input.length; i++) { if ( input[i].getAttribute("name") === "corp_name") { input[i].setAttribute("HanToZen",""); } } // Renderer2でcreateも試してみましたが、HTMLelementにsetAttributeした時と結果は同じでした var rendInput = this.renderer.createElement('input'); this.renderer.setAttribute(rendInput, 'name', 'corp_name2'); this.renderer.setAttribute(rendInput, 'HanToZen', ''); this.renderer.appendChild(this.element, rendInput); } }

han-to-zen.directive.ts

Angular

import {OnInit, Directive, ElementRef, HostListener} from '@angular/core'; import { convertHAN2ZEN } from "./util"; @Directive({ selector: '[HanToZen]' }) export class HanToZenDirective implements OnInit { private element: HTMLInputElement; constructor( private elementRef: ElementRef, ) { this.element = this.elementRef.nativeElement; } ngOnInit(){ this.element.value = convertHAN2ZEN(this.element.value); } @HostListener("blur", ["$event.target.value"]) onBlur(value){ this.element.value = convertHAN2ZEN(value); } }

directive-test.component.html

html

<h2>Directive Test</h2> <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate> <!-- firstのHanToZenは問題なく動作する --> <input name="first" [(ngModel)]="first" HanToZen> <!-- corp_nameにsetAttributeしたHanToZenは動作しない --> <input name="corp_name" value='100' [(ngModel)]="corp_name" > <button>Submit</button> </form>

補足情報(FW/ツールのバージョンなど)

Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.5
@angular-devkit/build-angular 0.6.5
@angular-devkit/build-optimizer 0.6.5
@angular-devkit/core 0.6.5
@angular-devkit/schematics 0.7.3 (cli-only)
@angular/cli 6.1.3
@ngtools/webpack 6.0.5
@schematics/angular 0.7.3 (cli-only)
@schematics/update 0.7.3 (cli-only)
rxjs 6.2.0
typescript 2.7.2
webpack 4.8.3

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。