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>