當孩子狀態改變時重新加載控制器 - Angular UI路由器

我是Angular UI路由器的新手，並且嘗試使用嵌套視圖創建應用程序。當孩子狀態改變時重新加載控制器 - Angular UI路由器

我有一個index.html託管'標題'狀態和'內容'狀態。在內容狀態中，我有兩個代表全局視圖和子視圖的導航欄。當用戶打開應用程序時，全局視圖應默認打開。但是，目前，無論何時運行應用程序，全局視圖控制器和子視圖控制器都會一起執行（兩個視圖都會一起加載）。

我所希望的是，只有全局控制器應該首先被執行，然後當用戶點擊子視圖時，其控制器應該被執行。在此之後，無論用戶何時在兩個視圖之間切換，控制器都應重新加載。

我一直在閱讀谷歌和這裏，但無法找到所需的解決方案。請讓我知道如果這是可能的使用ui路由器。謝謝。

的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-ui-router – Weedoze

感謝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>

這裏要補充的一點是，我是稍早在我的錨標記數據切換=「丸」，這是導致兩個子視圖之間進行導航的問題。進一步挖掘之後，我發現如果刪除此切換，導航工作將順利進行。

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

當孩子狀態改變時重新加載控制器 - Angular UI路由器

回答

相關問題