ui-routerを使ったスクロールバー付きのインラインフレーム

AngularJSでWebシステム開発 Angular JS
AngularJSでWebシステム開発

angularJSで使用できるui-router

これを使って、iframeふうなスクロールバー付きの小窓を作ってみます。
利用規約なんかに使えます

利用規約の作り方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は全画面表示になってしまい、小窓としては使えません。