离子嵌套视图相互加载

时间:2015-08-22 10:48:50

标签: angularjs ionic-framework ionic angular-routing angular-ui-router

这是我的Plunker

        .state('tabs', {
            url: "/tab",
            abstract: true,
            cache: false,
            templateUrl: "tabs.html"
//            controller: 'AppCtrl'
        })

        .state('tabs.home', {
            url: "/home",
            cache: false,
            views: {
                'home-tab': {
                    templateUrl: "home.html"
//                    controller: 'welcomeController'
                }
            }

        })

        .state('tabs.list', {
            url: "/list",
            cache: false,
            views: {
                'category-tab': {
                    templateUrl: "list.html"
//                  
                }
            }

        })


    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/tab/home');  

现在,当我在视图之间切换时,视图会相互加载,您可以看到它们。或者更好地说:网址更改但视图不会更改。

我错过了什么吗?感谢

1 个答案:

答案 0 :(得分:1)

好像你已经忘记在ion-view

中包装list.html内容了

<强> List.html

<ion-view>
  <ion-header-bar align-title="center" class="bar-royal">
    <h1 class="title">
list
</h1>
  </ion-header-bar>
  <ion-content class="">
    <button class="button btn-custom button-full button-assertive icon icon-left ion-android-bicycle no-border red-custom no-margin">
      Sport
    </button>
  </ion-content>
</ion-view>

Demo here