ng-bind-htmlでのページ内リンクが機能しない

こんにちは、いつもお世話になります。
monacaでAngularJSを使用しております。

JSONで取ってきたデータpost_contentをng-bind-htmlでバインドして特定のページで表示させています。

表示自体はきちんと出来ているのですが、

上記のaタグを押してもtext1に遷移するページ内リンクが機能しません。

ng-bind-htmlでページ内リンクを起こさせるにはどうすればよろしいでしょうか？
ご教授頂けたら幸いです。

Json
1{
2post: {
3post_id: 6315,
4post_title: "TestData",
5post_date: "2017-07-12T17:37:35",
6post_content: "<h1>TestData</h1> <div class="top_main_mokuji"> <div id="toc_container"><p class="toc_title">Mokuji</p> <ul class="toc_list"><li><a href="#text1">Go text1</a></li> <li><a href="#text2">Go text2</a></li></ul><h2 id="text1" style="margin-top:1000px;">text1</h2><h2 id="text2" style="margin-top:1000px;">text2</h2>"
7},
8comment: null
9}

表示するページ

<ons-page ng-controller="MoreCtrl">
    <ons-toolbar>
        <div class="center">
                {{naviHome.topPage.data.post.post_title}}
        </div>
    </ons-toolbar>
    
    <div class="contents" >
        <div ng-bind-html="naviHome.topPage.data.post.post_content"></div>
    </div>
</ons-page>

行動規範の内容に同意します

回答1件

ベストアンサー

<head>
<script>
ons.bootstrap();
</script>
</head>
</body>
<ons-navigator var="myNavigator">
   <ons-page>
      <ons-toolbar>
         <div class="left">
            <ons-toolbar-button onclick="myNavigator.pushPage('text1.html')">
               <ons-icon icon="ion-navicon"></ons-icon>
            </ons-toolbar-button>
         </div>
      </ons-toolbar>
      <div class="contents">
         <ons-button onclick="myNavigator.pushPage('text2.html')">text2</ons-button>
         <ons-button onclick="myNavigator.pushPage('text3.html')">text3</ons-button>
      </div>
   </ons-page>
</ons-navigator>

<ons-template id="text1.html">
   <ons-page>
      <div></div> 
   </ons-page>
</ons-template>

<ons-template id="text2.html">
   <ons-page>
      <div></div>
   </ons-page>
</ons-template>

<ons-template id="text3.html">
   <ons-page>
      <div></div>
   </div>
</ons-template>

</body>
</html>

ons-templateを使うと、同一ページ上に、複数のぺージがおけ、ナビゲーターで重ねていきます。
構造は、プッシュページは、上に重ねるという意味で、バックするには、

<ons-button onclick="myNavigator.popPage()"></ons-button>

で一番上に重なったページがスライスされます。

本文はDIVの中に書いてください。
angular.jsより、はるかに、Onsenの方が楽です。

こちらの本をKindleアプリとで読まれた方が早いです。
http://amzn.to/2uYfZXw

投稿2017/07/20 03:25

編集2017/07/24 08:28

grandcross_info

総合スコア130

ocha

2017/08/03 08:33

ご回答ありがとうございます。大変参考になります。ただ、今回はすでに外部からangularで色々なJSONデータを取ってきているので、angularを使う方がいいということになりました。解決方法としましては、JSONデータを作る際に a href="#id"となっているところを a href="#" onClick="document.getElementById('id').scrollIntoView(true)" に変換することによって解決致しました。

行動規範の内容に同意します