Error: [$compile:tplrt] Template for directive 'hoge' must have exactly one root element.
こんなエラーが出て、しばらく原因が分からず時間を無駄にしたのでメモ。
エラー発生条件(たぶん)
- カスタムディレクティブ
- restrict: E
- template または templateUrl に記述しているDOM要素が複数あり、かつインライン要素から始まっている
つまり、ブロックレベル要素で全体を囲むようtemplateのHTMLを修正したらエラーが解消しました。
いくつか試してみた結果
OKパターンの要素
- div
- form
- ul li
NGパターンの要素
- p
- span
Pタグみたいに、厳密には「ブロック要素=OK」というわけではないのですが、おそらくPタグ以外のブロック要素なら大丈夫じゃないかと思う(調べてはいない)
これについて、書籍や公式ドキュメントで何か言及されていないか少しだけ調べたのだけど、私のググりスキルでは見付けられなかったので、どなかた知っていたら教えてください。。。