角度uiルータのサブビューの問題

私は1年または2年の間、Angularで作業してきましたが、これはui-routerを使用した私の最初のプロジェクトです。ビューとサブビューでいくつかの問題が発生しています。このアプリは標準の左側のメニューバーで、メニューバーでクリックした内容に応じて右のビューが変わります。 dashboard.htmlファイル内のルート角度uiルータのサブビューの問題

.state("dashboard", { 
     url: "/dashboard", 
     templateUrl: "components/dashboard/dashboard.html", 
     data: { 
      pageTitle: "Dashboard", 
      requiresLogin: false 
     } 
    }) 

    .state("dashboard.welcome", { 
     url: "/welcome", 
     templateUrl: "components/welcome/welcome.html", 
     data: { 
      pageTitle: "Welcome", 
      requiresLogin: false 
     } 
    })

を定義config.jsのファイルでindex.htmlを

<body> 
    <div ui-view></div> 
</body>

上

<div class="dashboard"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-8"> 
     <div ui-view>

/dashboardパス・ロード正しく表示され、左側のナビゲーションバーに空白の右側が表示されます。しかし、状態をdashboard.welcome（/welcome）に変更すると、welcome.htmlテンプレートはロードされません。

出典

2016-05-06 bluedevil2k

は、あなたが '/ダッシュボード/ welcome'にURLを変更していることを確認していますか？ –

それは "dashboard.welcome"の状態のマッピングなので、 "/ welcome"にしないでください。 – bluedevil2k

no..itは親（ '/ダッシュボード'）+子（ '/ welcome'）の組み合わせになります。 –

ui-routerで作業するときは、状態の概念がルートと異なることを理解する必要があります。サブ状態を定義するとき、そのサブ状態はその親状態に対して相対的に定義されます。シナリオではdashboard.welcomeは子の状態としてdashboardと定義されています。サブステートへのルートは親に対して相対的で、{parent url}/{child url}です。によりルートを変更$のlocation.pathを使用した状態名

$state.go('dashboard.welcome');

を指定することにより、状態を変更state.go $を使用して

：したがって、あなたはその状態への経路に2以下のいずれかを使用する必要がありますあなたは/welcomeへのリンクが状態dashboard.welcomeのためになりたいようなURL

$location.path('/dashboard/welcome');

出典

2016-05-09 17:24:26

https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states。ネストされたURLをお勧めしますが、絶対URLを使用する必要がある場合は、URL文字列の先頭に特殊記号 '^'を付ける必要があります。それはURLです： '^/welcome' – pdorgambide

を指定すると、それが鳴ります。これはどのようにこれを行うことができるかを示すプランナーです。ダッシュボードとウェルカム状態の2つのセットを示します。最初の状態セット（ダッシュボード&ウェルカム）は、/dashboard/welcomeがdashboard.welcome状態になることを示しています。

第2セット（ダッシュボード2 & welcome2）は、/welcomeが状態dashboard2.welcome2になることを示しています。私はこれがあなたが探していたものだと信じています。

リンクの上にカーソルを置くと、どこに移動するかがわかります。 UI-ルータで

https://plnkr.co/edit/AVKPFa?p=info

出典

2016-05-12 19:08:49 BatteryAcid

ネストされたルートは、ネストされたURLを取得します。私はしかし、この種の構造のために名前付きビューを使用することをお勧めします。あなたはここでそれについての詳細情報を見つけることができます。

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

それの要旨は次のとおりです。あなたは、左側のメニューナビゲーションのための指定されたコンポーネント（UIビュー）とあなたをずっと与えたコンテンツのための別のものを指定することができます名前付きコンポーネントを子ステートで上書きすることができます。また、必要に応じてデフォルトのテンプレートを保持することもできます。

例：

.state('root', { 
      url: '', 
      abstract: true, 
      views: { 
       'header': { 
        templateUrl: 'templates/partials/header.html', 
        controller: 'headerCtrl' 
       }, 
       'logo': { 
        templateUrl: 'templates/partials/logoView.html' 
       }, 
       'footer':{ 
        templateUrl: 'templates/partials/footer.html', 
        controller: 'footerCtrl' 
       } 
      } 
     }) 
     .state('root.login', { 
      url: '/login', 
      views: { 
       '[email protected]': { 
        template: '' 
       }, 
       '[email protected]': { 
        templateUrl: 'templates/login.html', 
        controller: 'loginController' 
       } 
      } 
     }) 
     .state('root.report', { 
      url: '/report', 
      views: { 
       '[email protected]': { 
        templateUrl: 'templates/eu_dashboard.html', 
        controller: 'reportController' 
       } 
      } 
    })

そして、あなたのindex.htmlで：

<div ui-view="logo"></div> 
<div ui-view="header"></div> 
<div id="mainView" ui-view="container"></div> 
<div ui-view="footer"></div>

出典

2016-05-14 14:28:06 Nirri

角度uiルータのサブビューの問題

答えて

関連する問題