Javascript 在内容中嵌套导航视图_Javascript_Angularjs_Angular Ui Router_Ionic

Javascript 在内容中嵌套导航视图

javascript angularjs

Javascript 在内容中嵌套导航视图,javascript,angularjs,angular-ui-router,ionic,Javascript,Angularjs,Angular Ui Router,Ionic,我有一个基本的、有效的例子来说明我想做什么，但采用这种方法有一个奇怪的局限性。在templates/group.html中，似乎无法在ion导航视图的上方或下方添加内容我可以理解为什么嵌套的ion导航视图不起作用，因为它有一个全屏的容器，但将其更改为ui视图会破坏父ion导航视图。。。过渡和离子导航条停止工作。似乎家长ion导航视图不应该介意有一个子ui视图。也许这种用户界面在爱奥尼亚是不可能的？我也有同样的问题。我猜它不喜欢离子导航视图在离子内容的内部。有几种可能的解决办法。我倾向于根据需

我有一个基本的、有效的例子来说明我想做什么，但采用这种方法有一个奇怪的局限性。在

templates/group.html

中，似乎无法在

ion导航视图的上方或下方添加内容

我可以理解为什么嵌套的ion导航视图不起作用，因为它有一个全屏的容器，但将其更改为ui视图会破坏父ion导航视图。。。过渡和离子导航条停止工作。似乎家长ion导航视图
不应该介意有一个子ui视图
。也许这种用户界面在爱奥尼亚是不可能的？
我也有同样的问题。我猜它不喜欢离子导航视图
在离子内容
的内部。有几种可能的解决办法。我倾向于根据需要嵌套尽可能多的ion导航视图
s，然后在层次结构中只使用ion内容
一次。如果我需要在其中进一步嵌套，我只需使用ng视图

例如，您的视图可能如下所示
<!-- 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>


某个名字
{{someproperty}}

请注意，ion content
用于滚动。它的大小与它的父代相当
到目前为止，我只是不知道有时使用ng视图
代替ion导航视图
会有什么副作用。因此，请告诉我您在这方面的经验。
除非提出解决方案，否则我唯一能想到的就是将嵌套视图上方或下方的内容变成指令，并在每个嵌套视图上包含指令元素。没有那么干，但很有效。很好的解决方案。使用ion导航视图
内部的ion视图似乎会干扰我输入表单的转换。把它们和离子视图并排放在一起，我已经解决了这个问题。@MariusRumpf啊，我需要测试一下。谢谢：）
    <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>

    <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>

<!-- 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>