angularJSで使用できるui-router
これを使って、iframeふうなスクロールバー付きの小窓を作ってみます。
利用規約なんかに使えます
通常のHTMLではiframeタグでやればいいと思います
Angular JS + ui-routerの環境では次のように記述すればできました
HTMLコード(ViewAの中に流し込まれるコード)
<label for="code">招待コード</label> <input type="text" placeholder="無ければ空欄のままにして下さい" /> <div class="inlineFrame"> <div ui-view="agreeView" autoscroll></div> </div>
CSSコード
.inlineFrame{ overflow: scroll; /* スクロール表示 */ width: auto; height: 200px; border:solid 1px black; }
JSコード
.state('/register', { url: "/register", views: { "viewA": { templateUrl: "views/register.html",controller:"toCtrl" }, "agreeView@/register": { templateUrl: "views/agree.html" , controller:"" }, }, })
このサンプルでは、ViewAがユーザ登録画面です。
ViewAの中に、agreeViewを作って読み込んでいます。
Viewの中にViewを作ると、@(アットマーク)で明確にViewを指定しないとうまく動かない時があるので注意します。
参考までに、ViewAはindex.htmlに次のように記述します
<div class="container"> <div ui-view="viewA"></div> </div>
(ViewAの中にagreeViewが入る)
ui-routerは最初とっつきにくいですが、わかってくるといろんなことができるのでとても便利です
CSSの記述が無いと、agreeは全画面表示になってしまい、小窓としては使えません。