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は全画面表示になってしまい、小窓としては使えません。

