最近、AngularJSをプロジェクトで触る機会が多くなってきました (AngularJSといってもバージョン1)
慣れると便利なAngularJSですが、普段jQueryとかやってると根本的な考え方から変えないと行けないので中々大変ですね…w

AngularJSではdirectiveという仕組みがあり、そこでhtmlをtemplateとして読み込む事が出来ますが、
今回は同じdirectiveで複数のtemplateを使い分けるやり方を解説していきたいと思います。

なお、そもそもAngularJSって?directiveってなに?みたいな所は今回割愛します。

やりたいこと

angularのdirective内で、条件によって動的に使用するtemplateを切り替える。

 

方法

directiveのtemplateUrlにfunctionを使用して、HTML側のタグのパラメータを渡して判断させる。

 

サンプル

シンプルなテンプレートの呼び出し

 

複数のテンプレートを分けて呼び出し

 

まとめ

出力結果は、type=”first”属性を持っているタグの中にtemplate_1.htmlが入り、”second”を持つタグの中にtemplate_2.htmlが入る形となります。

directiveに渡す属性は今回は便宜的にtypeとしましたが、特に制約はありません。

注意点として、directiveに渡す値を動的に変更させたい場合、angulerの初期化処理が走るより先にHTML側には記述されてるようにしておかないと、directiveを初期化する際に値が足りず思うように動作してくれません。どうしてもJSで切り替えたい場合は他の手段も検討するべきでしょう。

これで同じdirectiveの処理、振る舞いを使いまわしつつ、見た目を構築するHTMLのtemplate部分を出し分けることが出来ます。

 

 

 

 


【AngularJS】directiveで読み込むtemplateを動的に切り替える | astone.jeez.jphttp://astone.jeez.jp/wp-content/uploads/2016/01/Life-of-Pix-free-stock-photos-city-woman-camera-leeroy.jpghttp://astone.jeez.jp/wp-content/uploads/2016/01/Life-of-Pix-free-stock-photos-city-woman-camera-leeroy-150x150.jpgmilksoapProgramminganguler.js,HTML,JavaScript,template,フロントエンド
最近、AngularJSをプロジェクトで触る機会が多くなってきました (AngularJSといってもバージョン1) 慣れると便利なAngularJSですが、普段jQueryとかやってると根本的な考え方から変えないと行けないので中々大変ですね…w AngularJSではdirectiveという仕組みがあり、そこでhtmlをtemplateとして読み込む事が出来ますが、 今回は同じdirectiveで複数のtemplateを使い分けるやり方を解説していきたいと思います。 なお、そもそもAngularJSって?directiveってなに?みたいな所は今回割愛します。 やりたいこと angularのdirective内で、条件によって動的に使用するtemplateを切り替える。   方法 directiveのtemplateUrlにfunctionを使用して、HTML側のタグのパラメータを渡して判断させる。   サンプル シンプルなテンプレートの呼び出し   複数のテンプレートを分けて呼び出し   まとめ 出力結果は、type='first'属性を持っているタグの中にtemplate_1.htmlが入り、'second'を持つタグの中にtemplate_2.htmlが入る形となります。 directiveに渡す属性は今回は便宜的にtypeとしましたが、特に制約はありません。 注意点として、directiveに渡す値を動的に変更させたい場合、angulerの初期化処理が走るより先にHTML側には記述されてるようにしておかないと、directiveを初期化する際に値が足りず思うように動作してくれません。どうしてもJSで切り替えたい場合は他の手段も検討するべきでしょう。 これで同じdirectiveの処理、振る舞いを使いまわしつつ、見た目を構築するHTMLのtemplate部分を出し分けることが出来ます。