2016-04-05 3 views
3

ionicとui-routingに問題があります。子供の状態になると、URLは更新されますが、ビューは変わりません。angle-ui-routingはビューを変更しません

私は直接に右のURLを挿入し、そこに行く場合でも、ビューは変更されませんapp.search.productに行くようにしようとすると、これは私のrouting.jsこの例では

.config(function($stateProvider, $urlRouterProvider, $locationProvider, $ionicConfigProvider) { 

    $ionicConfigProvider.views.maxCache(0); 

    $stateProvider 

     .state('app', { 
      url: "/", 
      abstract: true, 
      templateUrl: "menu.html", 
      controller: "menuCtrl" 
     }) 

     .state('app.home', { 
      url: "home", 
      cache: false, 
      views: { 
       'menuContent': { 
        templateUrl: "home.html", 
        controller: "homeCtrl" 
       } 
      } 
     }) 

     .state('app.search', { 
      url: "search", 
      views: { 
       'menuContent': { 
        templateUrl: "search.html", 
        controller: "searchCtrl" 
       } 
      } 
     }) 

     .state('app.search.product', { 
      url: "/product/:id", 
      views: { 
       'menuContent': { 
        templateUrl: "productPage.html", 
        controller: "singleProductCtrl" 
       } 
      } 
     }) 

     .state('app.search.product.market', { 
      url: "/product/:id", 
      views: { 
       'menuContent': { 
        templateUrl: "market.html",, 
        controller: "marketCtrl' 
       } 
      } 
     }); 
    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/home'); 
}); 

ですブラウザ。私はまた、UI-SREF-optsの= "{リロード:真}にしようと試みてきました。オプション何も変更

をここでは、問題を示してplunker(後のビューは変更されません検索)https://plnkr.co/edit/JrNFkV50klZItOQS18Iu

+0

私は自宅から移動してきました:その場合の解決策で* .product状態名から.searchを取り除くことであろう。私は他のメニューポイントを参照してください –

答えて

2

私は経験がありませんIonicが、ui-routerの設定角度に基づいてネストされたビューを期待していますが、ページには単一のビューしかありません。意味は、第2レベル(製品)は読み込むことができません。 Ionicはネストされたイオンビューを許可していないので、通常のui-viewをネストされたビューとして使用することができます。

<ion-view view-title="Search"> 
<ion-content> 
    <h1>Search</h1> 
    <a ui-sref=".product({id: 1})">Go to product</a> 
    <ui-view name="secondLevel"></ui-view> 
</ion-content> 

ここに修正を加えて、あなたのコードをチェックしてください:https://plnkr.co/edit/LdgmoAEo1pS9spi1Su1z

あなたが探していたものかどうかは不明です。あなたのplunkrに基づいて、偶然ネストされたビューを定義したようです。 - >検索をし、検索 - >ホームhttps://plnkr.co/edit/PGICsBhzyCOTSe9af4yu

 .state('app.product', { 
      url: "/product/:id", 
      views: { 
       'menuContent': { 
        templateUrl: "productPage.html" 
       } 
      } 
     }) 

     .state('app.market', { 
      url: "/product/:id", 
      views: { 
       'menuContent': { 
        templateUrl: "market.html" 
       } 
      } 
     }); 
+0

ありがとう、私はこれを使用して...また、[this](http://stackoverflow.com/a/36426578/6160786)は動作しています – Doc

0

試みです商品リンクタグに行くに製品の状態のUI-SREF名に置くためにUI-SREFは=「app.product」

1

は、この構成を使用している :あなたは「アプリを宣言すると

$stateProvider 

     .state('app', { 
      url: "/", 
      abstract: true, 
      templateUrl: "menu.html", 
     }) 

     .state('app.home', { 
      url: "home", 
      views: { 
       'menuContent': { 
        templateUrl: "home.html" 
       } 
      } 
     }) 

     .state('app.search', { 
      url: "search", 
      views: { 
       'menuContent': { 
        templateUrl: "search.html" 
       } 
      } 
     }) 

     .state('app.product', { 
      url: "/product/:id", 
      views: { 
       'menuContent': { 
        templateUrl: "productPage.html" 
       } 
      } 
     }) 

     .state('app.market', { 
      url: "/product/:id", 
      views: { 
       'menuContent': { 
        templateUrl: "market.html" 
       } 
      } 
     }); 

を.search.product 'を指定すると、これは検索状態(search.html)のテンプレートは、子供の状態を読み込むためのビューを持っている必要があります。これはそうではありません、あなたのビューは同じ "レベル"で移動しています

関連する問題