AngularJSとBootstrapではまったお話

Angular Bootstrap tech

Bootstrapは前にも使ってたので、Angularでも同じように使おうとしてハマったのでメモ

今回ハマったのはBootstrapのdata-spyの扱いについて

早速サンプル

<body>
  <nav-bar></nav-bar>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <side-bar></side-bar>
      </div>
      <div class="col-md-9" ng-view=""></div>
    </div>
  </div>
</body>

って感じで3paneな構成を用意してdirectiveでサイドバーを表示している

多分、ng-includeでサイドバーを出しても同じだと思うけど。

サイドバーのテンプレートでは

  <div data-spy="affix">
    …
  </div>

表示されるサイドバーのhtmlでdata-spyを登録してあげたんだけど、なぜだかdata-spyが効いてこない。。。

楽せずBootstrapのコードを確認する事にすると(ホントは楽しようとググったけど、、)

簡単に見つかりましたよ原因が

$(window).on('load', function () {

    $('[data-spy="affix"]').each(function () {

        …

    })

  }) 

 テンプレートページ読み込み前にdata-spyの登録は打ち切られました:p

scrollspyも同じなので、data-spyの記述はindex.htmlで行うしかない様です。