LoginSignup
5
3

More than 5 years have passed since last update.

カスタムディレクティブのテンプレートで"root element"なんたらのエラーが出た場合

Last updated at Posted at 2015-11-01
Error: [$compile:tplrt] Template for directive 'hoge' must have exactly one root element.

こんなエラーが出て、しばらく原因が分からず時間を無駄にしたのでメモ。

エラー発生条件(たぶん)

  1. カスタムディレクティブ
  2. restrict: E
  3. template または templateUrl に記述しているDOM要素が複数あり、かつインライン要素から始まっている

つまり、ブロックレベル要素で全体を囲むようtemplateのHTMLを修正したらエラーが解消しました。

いくつか試してみた結果

OKパターンの要素
- div
- form
- ul li

NGパターンの要素
- p
- span

Pタグみたいに、厳密には「ブロック要素=OK」というわけではないのですが、おそらくPタグ以外のブロック要素なら大丈夫じゃないかと思う(調べてはいない)

これについて、書籍や公式ドキュメントで何か言及されていないか少しだけ調べたのだけど、私のググりスキルでは見付けられなかったので、どなかた知っていたら教えてください。。。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3