子ステートが変更されたときにリロードコントローラ - 角型UIルータ

角度UIルーターが新しく、ネストされたビューでアプリケーションを作成しようとしています。子ステートが変更されたときにリロードコントローラ - 角型UIルータ

私は、「ヘッダ」状態と「コンテンツ」状態をホストするindex.htmlを持っています。コンテンツの状態では、グローバルビューとサブビューを表す2つのナビゲーションバーがあります。ユーザーがアプリケーションを開くと、グローバルビューがデフォルトで開きます。

しかし、現時点では、アプリケーションを実行するたびに、グローバルビューとサブビューコントローラが同時に実行されています（両方のビューが同時にロードされています）。

私が望むのは、グローバルコントローラのみが最初に実行され、ユーザーがサブビューをクリックするとコントローラが実行されることです。これに続いて、ユーザーが両方のビューを切り替えるたびに、コントローラーがリロードする必要があります。

Googleから読んでいましたが、ここでは必要な解決策を見つけることができませんでした。 ui-routerを使用してこれが可能かどうかお知らせください。ありがとう。

index.htmlを

<html>  
<body> 

<div class="fluid-container"> 
    <div ui-view="header"></div> 
    <div ui-view="content"></div> 
</div> 

</body> 
</html>

content.html

<div class="row" style="background-color: #F9F9F8"> 
    <div class="col-md-3"></div> 

    <div class="col-md-6"> 
     <ul class="nav nav-pills nav-justified"> 
      <li class="active"><a data-toggle="pill" href="#globalView">Global</a></li> 
      <li><a data-toggle="pill" href="#subView">Sub View</a></li> 
     </ul> 
    </div> 

    <div class="col-md-3"></div> 
</div> 

<div class="row">  
    <br> 
    <hr></hr> 
    <div class="tab-content"> 
     <div id="globalView" class="tab-pane fade in active" ui-view="globalView"></div> 
     <div id="subAccountView" class="tab-pane fade" ui-view="subView"></div> 
    </div> 

</div>

app.js

$urlRouterProvider.otherwise("/firstPage"); 
    $urlRouterProvider.when('', '/firstPage'); 
    $stateProvider 
     .state('home', { 
      url: '', 
      views: { 
       /** Find the views named in index.html and inject the named views**/ 
       'header': { 
        templateUrl: 'views/header.html', 
        controller: 'headerController', 
        controllerAs: 'headerCtrl' 
       }, 
       'content': { 
        templateUrl: 'views/content.html', 
        controller: 'contentController', 
        controllerAs: 'contentCtrl',       
       } 
      } 
     }) 
     .state('home.summary', { 
      url: '/firstPage', 
      views: { 
       'globalView': { 
        templateUrl: "views/globalViewPage.html", 
        controller: "globalViewController", 
        controllerAs: "globalViewCtrl" 
       }, 
       'subView': { 
        templateUrl: "views/subView.html", 
        controller: "subViewController", 
        controllerAs: "subViewCtrl" 
       }      
      } 
     });

出典

2016-07-05 Yash Kapila

このチュートリアルを確認してくださいhttps://scotch.io/tutorials/angular-routing-using-u-router – Weedoze

Thanks Weedoze。このチュートリアルは非常に役に立ちました。私は以下の答えを掲載しました。 –

問題はありませんヤッシュ、それは嬉しかったです:) – Weedoze

私はsolutiを見つけましたコメントにWeedozeによって提供されたチュートリアルを辿って、私の質問に答えます。以下は更新されたファイルです。

index.htmlは上記と同じです。

content.html

<div class="row"> 
    <div class="col-md-3"></div> 

    <div class="col-md-6"> 
     <ul class="nav nav-pills nav-justified"> 
      <li class="active"><a ui-sref=".globalView">Global</a></li> 
      <li><a ui-sref=".subView">Sub View</a></li> 
     </ul> 
    </div> 

    <div class="col-md-3"></div> 
</div> 

<div class="row">  
    <br> 
    <hr></hr> 
    <div class="tab-content"> 
     <div class="tab-pane fade in active" ui-view></div> 
    </div> 

</div>

ここで追加するためのポイントは、私は、以前の2つのつの子ビューの間をナビゲートでの問題を引き起こしていた私のアンカータグ内のデータ・トグル=「薬」を持っていたということです。さらに掘り下げた後、このトグルを外すとスムーズにナビゲーションが動作することがわかりました。このコードは、私は2つのつの子ビューを切り替えると、私はビューを切り替えるたび、コントローラが再ロード取得することができます

app.js

$urlRouterProvider.otherwise("/globalView"); 
    $urlRouterProvider.when('', '/globalView'); 
    $stateProvider 
     .state('home', { 
      url: '', 
      views: { 
       /** Find the views named in index.html and inject the named views**/ 
       'header': { 
        templateUrl: 'views/header.html', 
        controller: 'headerController', 
        controllerAs: 'headerCtrl' 
       }, 
       'content': { 
        templateUrl: 'views/content.html', 
        controller: 'contentController', 
        controllerAs: 'contentCtrl',       
       } 
      } 
     })     
     .state('home.globalView', { 
      templateUrl: "views/globalViewPage.html", 
      controller: "globalViewController", 
      controllerAs: "globalViewCtrl", 
      url: '/globalView' 
     }) 
     .state('home.subView', { 
      templateUrl: "views/subView.html", 
      controller: "subViewController", 
      controllerAs: "subViewCtrl", 
      url: '/subView' 
     });

。

出典

2016-07-06 01:30:49

子ステートが変更されたときにリロードコントローラ - 角型UIルータ

答えて

関連する問題