2015-11-10 48 views
2

我有一個基本的工作示例,我想要做什麼,但採取這種方法有一個奇怪的限制。在templates/group.html中,似乎沒有任何方法可以在ion-nav-view之上或之下添加內容。嵌套在內容中的離子導航視圖

Click here for live demo.

$stateProvider.state({ 
    name: 'home', 
    url: '/', 
    templateUrl: 'templates/home.html' 
    }); 
    $stateProvider.state({ 
    name: 'group', 
    url: '/group', 
    templateUrl: 'templates/group.html', 
    abstract: true 
    }); 
    $stateProvider.state({ 
    name: 'group.home', 
    url: '/', 
    templateUrl: 'templates/group-home.html' 
    }); 
    $stateProvider.state({ 
    name: 'group.post', 
    url: '/post/:id', 
    templateUrl: 'templates/group-post.html' 
    }); 
<ion-nav-bar class="bar-positive"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 
    </ion-nav-bar> 

    <ion-nav-view></ion-nav-view> 

    <script id="templates/home.html" type="text/ng-template"> 
     <ion-view view-title="Home"> 
     <ion-content> 
      <p>This is home.</p> 
      <a ui-sref="group.home">Go to a group.</a> 
     </ion-content> 
     </ion-view> 
    </script> 

    <script id="templates/group.html" type="text/ng-template"> 
     <ion-view view-title="Group"> 
     <ion-nav-view></ion-nav-view> 
     </ion-view> 
    </script> 

    <script id="templates/group-home.html" type="text/ng-template"> 
     <ion-view view-title="Group Home"> 
     <ion-content> 
      <p>This is the group home.</p> 
      <a ui-sref="group.post({id: 4})">Go to group post.</a> 
     </ion-content> 
     </ion-view> 
    </script> 

    <script id="templates/group-post.html" type="text/ng-template"> 
     <ion-view view-title="Group Post"> 
     <ion-content> 
      <p>This is a group post.</p> 
     </ion-content> 
     </ion-view> 
    </script> 

我怎樣才能得到這種行爲,但也內group.html添加一些內容?

例如:

<script id="templates/group.html" type="text/ng-template"> 
     <ion-view view-title="Group"> 
     <p>Some stuff here.</p> 
     <ion-nav-view></ion-nav-view> <!-- group child view stuff here --> 
     <p>Stuff here, too, if possible.</p> 
     </ion-view> 
    </script> 

我可以看到爲什麼嵌套ion-nav-view不工作了,因爲它有一個完整的屏幕一種容器的事情,但改變它的用戶界面視圖打破了父ion-nav-view ...轉換和ion-nav-bar停止工作。看起來像父母ion-nav-view不應該介意有一個孩子ui-view。也許這種UI只是不可能用離子?

+0

除非提供解決方案,否則我唯一能想到的就是將應該在嵌套視圖之上或之下的內容轉換爲指令,並在每個嵌套視圖中包含指令元素。不如干,但它的作品。 – m59

回答

0

我有同樣的問題。猜猜它不喜歡ion-nav-view裏面的ion-content。有幾種可能的解決方法。我傾向於根據需要嵌套許多ion-nav-view,然後在層次結構中只使用ion-content。如果我只需使用ng-view就需要進一步嵌套。

例如,您的看法可能如下所示。

<!-- root view --> 
<body> 
    <ion-nav-view></ion-nav-view> 
</body> 

<!-- some example abstract page --> 
<ion-view> 
    <div class="bar bar-header bar-positive"> 
     <h1 class="title">Some name</h1> 
    </div> 

    <!-- notice class="has-header" which would normally be appended to <ion-content> --> 
    <ion-nav-view class="has-header"></ion-nav-view> 
</ion-view> 

<!-- example content of example abstract page--> 
<ion-view> 
    <ion-content> 
     <p>{{someproperty}}</p> 
     <div ng-view></div> 
    </ion-content> 
</ion-view> 

注意ion-content用於滾動。它的大小和它的父母一致。

到目前爲止,我只不知道它會有什麼副作用的,有時ng-view代替ion-nav-view。所以告訴我你的解決方法。

+0

好的解決方案。在'ion-view'內使用'ion-nav-view'似乎與我輸入表單的轉換混亂。把它們與「離子視圖」並排放在一起已經解決了我的問題。 –

+0

@MariusRumpf啊,我需要測試這個。謝謝 :) – LuckyLikey