2016-06-16 11 views
1

UIルーターでルーティングコードを構成する方法がわかりません。私のインデックスファイルに親内に子の状態が読み込まれない

、次のように私はメニューテンプレートと2つのサイドバーのテンプレートで呼び出す: index.htmlを

<!-- head code above here --> 
<body ng-app="ICP_App" ng-cloak> 
    <div layout-fill layout="row" ng-controller="AppController as AppCtrl"> 
     <div ui-view="left-nav"></div> 
     <div ui-view="right-nav"></div> 
     <div ui-view="toolbar"></div> 

     <!-- this is where I am expecting/wanting my dashboard template to load (and others when at the correct url--> 
     <div class="page-content view" ui-view></div> 

     <!-- footer code under here --> 

マイルート:

$urlRouterProvider.otherwise('dashboard'); 

$stateProvider 
    .state('root', { 
     abstract: true, 
     templateUrl: '../partials/icp_index.html', 
     controller: 'AppController as AppCtrl', 
     url: '', 
     views: { 
      'left-nav': { 
       templateUrl: '../partials/left-nav.html' 
      }, 
      'right-nav': { 
       templateUrl: '../partials/right-nav.html' 
      }, 
      'toolbar': { 
       templateUrl: '../partials/toolbar.html' 
      } 
     } 
    }) 
    .state('root.dashboard', { 
     url: '/dashboard', 
     templateUrl: '../partials/agency-dashboard.html', 
     controller: 'AppController as AppCtrl' 
    }) 

しかし、メニューとサイドバーは読み込まれますが、メインのコンテンツ領域は空白のままです。私はそれが「それ以外のこと」と関係しているのだろうか?

私のインデックスファイルには、メニューとサイドバーが含まれている必要があります。そして、その状態のコンテンツが上記のところにロードされます。ここではダッシュボードテンプレートです。 '.otherwise'は、URLが間違っているか不完全なときに(インデックスファイル内の)ダッシュボードを表示するためのものです。

ありがとうございます。

答えて

1

あなたはそのUIビューに名前を付ける必要があり、そしてあなたの子供の状態で、ユーザーが指定および/または所望のビューをオーバーライドする必要があるので、それはのようになります。

<div class="page-content view" ui-view="main-content"></div> 

と状態の定義:

.state('root.dashboard', { 
     url: '/dashboard', 
     views: { 
      '[email protected]': { 
       templateUrl: '../partials/agency-dashboard.html', 
       controller: 'AppController as AppCtrl' 
      } 
     } 
    }) 

また、あなたは、2つのテンプレートを持っている必要があり、一つはrootのみのUIビュー(index.htmlを)を定義し、他の一つは、名前付きのビューが含まれているあなたのicp_indexです。このplunkrは、構造体を示しています。

plnkr.co/edit/zjngTr0JU6cUGBtMsfN0

+0

ありがとう@frankiesを、が、ページには、まだまったく同じレンダリング - メニューやサイドバー、中央 – DJC

+0

で無内容は、私は私があなたの問題が何であるかを見ると思います。 ** index.html **と** ../partials/icp_index.html **の2つのテンプレートがあると思いますか?それらは分離する必要があり、一方はルートui-viewを定義し、もう1つは名前付きビューを含むicp_indexです。この問題が解決したことを示すplunkrを付けました。 http://plnkr.co/edit/zjngTr0JU6cUGBtMsfN0 – frankies

+0

私はあなたのplunkrに変更を実装しましたが、ページは空白になり、コンソールエラーが表示されます(メニューのボタンとは関係なく)いつもメニューをリロードしているように無期限に。私はここでLaravelを使用していて、index.htmlビューを指すようにルートを設定していますが、UI-routerもインデックスファイルを探します。 – DJC

関連する問題