Angular Controller父/子作用域設置父變量到子作用域變量

Question

我在設置我的應用程序的標題以對應應用程序所處的當前狀態時出現問題。我正在使用$ stateprovider並具有抽象父狀態我想從當前的嵌套狀態設置標題。我第一次切換狀態時，標題將切換到正確的標題。但是，當我切換回來時，標題將不再改變。

我stateprovider看起來是這樣的，與「標籤」狀態的狀態下的其他州也嵌套：

$stateProvider. 

.state('tab', { 
    url : "/tab", 
    abstract : true, 
    templateUrl : "templates/tabs.html", 
    controller : function($scope){ 
     $scope.header = $scope.header || {title: 'Default'}; 
    } 
}) 

// Each tab has its own nav history stack: 

.state('tab.charts', { 
    url : '/charts', 
    views : { 
     'charts-screen' : { 
      templateUrl : 'templates/chart.html', 
      controller : 'ChartController' 
     } 
    }, 
    reload: true 
}) 

.state('tab.report-list', { 
    url : '/reportList', 
    views : { 
     'report-list' : { 
      templateUrl : 'templates/tab-report-list.html', 
      controller : 'ReportListController' 
     } 
    } 
}) 

我想每個嵌套的狀態可以設置標題標題，像所以：

.controller('ChartController', function($scope){ 
    $scope.header.title = 'Chart Title'; 
} 

.controller('ReportListController', function($scope){ 
    $scope.header.title = 'Report Title'; 
} 

當我從tab.charts導航到tab.report列表，標題改變 到正確的標題，「報告標題」，但是，當我瀏覽回標題 仍然是「報告標題」。

什麼是在角度做到這一點的正確方法？我認爲設置狀態的重新加載 字段將確保它重新獲取活動控制器中的$ scope變量 。

Answer 1

我想訣竅是使用ui-sref-opts="{reload: true}"這將重新加載抽象控制器，您可以根據每個路由的數據集設置標題。同時使用數據將標題添加到$scope，可用於在ui-sref鏈接重新加載。

請看看下面的演示或在這fiddle。

angular.module('demoApp', ['ui.router']) 
 
\t .controller('ChartController', ChartController) 
 
\t .controller('ReportListController', ReportListController) 
 
\t .config(Config); 
 

 
function Config($urlRouterProvider, $stateProvider) { 
 
    $urlRouterProvider.otherwise('tab/charts'); 
 
    $stateProvider 
 
    \t .state('tab', { 
 
     url : "/tab", 
 
     abstract : true, 
 
     templateUrl : "templates/tabs.html", 
 
     controller : function($scope, $state){ 
 
      console.log('tabs', $state.current.data.heading); 
 
      $scope.heading = $state.current.data.heading || 'Default'; 
 
      //$scope.header = $scope.header || {title: 'Default'}; 
 
     } 
 
    }) 
 

 
    // Each tab has its own nav history stack: 
 

 
    .state('tab.charts', { 
 
     url : '/charts', 
 
     data: { 
 
     \t heading: 'Charts' 
 
     }, 
 
     views : { 
 
      'charts-screen' : { 
 
       templateUrl : 'templates/chart.html', 
 
       controller : 'ChartController' 
 
      } 
 
     } 
 
    }) 
 

 
    .state('tab.report-list', { 
 
     url : '/report-list', 
 
     data: { 
 
     \t heading: 'List' 
 
     }, 
 
     views : { 
 
      'report-list' : { 
 
       templateUrl : 'templates/tab-report-list.html', 
 
       controller : 'ReportListController' 
 
      } 
 
     } 
 
    }); 
 
    
 
} 
 

 
function ReportListController($scope, $state) { 
 
    console.log('reportlist', $state); 
 
} 
 

 
function ChartController($scope, $state) { 
 
\t console.log('chart', $state); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> 
 

 
<div ng-app="demoApp"> 
 
    <script type="text/ng-template" id="templates/tabs.html"> 
 
     <div class="container"> 
 
      <nav class="navbar navbar-default navbar-static-top"> 
 
       <div class="container"> 
 
       <div class="navbar-header"> 
 
        <a class="navbar-brand" href="#">Project name</a> 
 
       </div> 
 
        <ul class="nav navbar-nav"> 
 
         <li> 
 
          <a href="#" ui-sref="tab.charts" ui-sref-opts="{reload: true}">Charts</a></li> 
 
         <li> 
 
          <a href="#" ui-sref="tab.report-list" ui-sref-opts="{reload: true}">List</a></li> 
 
        </ul> 
 
       </div> 
 
      </nav> 
 
      <div ui-view=""></div> 
 
      <div ui-view="charts-screen"></div> 
 
      <div ui-view="report-list"></div> 
 
     </div> 
 
    </script> 
 
    
 
    <script type="text/ng-template" id="templates/chart.html"> 
 
     <h1>{{heading}}</h1> 
 
     <div ui-view=""></div> 
 
    </script> 
 
    
 
    <script type="text/ng-template" id="templates/tab-report-list.html"> 
 
     <h1>{{heading}}</h1> 
 
     <div ui-view=""></div> 
 
    </script> 
 
    
 
    <div ui-view=""></div> 
 
</div>