Question

我在设置我的应用程序上的标题以对应应用程序所处的当前状态时遇到问题。我正在使用$ stateprovider并且有一个抽象的父状态，我想从其当前的嵌套状态设置标题。第一次切换状态时，标题将切换到正确的标题。但是，当我切换回来时，标题将不再改变。

我的stateprovider看起来像这样，'tab'状态是其他状态嵌套在其中的状态：

$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-list时，标题会发生变化到正确的标题，'报告标题'，但当我导航回标题仍然是“报告标题”。

以角度方式执行此操作的正确方法是什么？我以为设置重装状态字段将确保它重新获取$ scope变量在主动控制器中。

Answer 1

我认为诀窍是使用ui-sref-opts="{reload: true}"这将重新加载抽象控制器，您可以根据每个路径的数据集设置标题。另外，使用数据将标题添加到$scope时，可以使用ui-sref链接重新加载。

请查看下面的演示或此fiddle。

angular.module('demoApp', ['ui.router'])
	.controller('ChartController', ChartController)
	.controller('ReportListController', ReportListController)
	.config(Config);

function Config($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('tab/charts');
    $stateProvider
    	.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: {
        	heading: 'Charts'
        },
        views : {
            'charts-screen' : {
                templateUrl : 'templates/chart.html',
                controller : 'ChartController'
            }
        }
    })

    .state('tab.report-list', {
        url : '/report-list',
        data: {
        	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) {
	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>

Angular Controller父/子范围将父变量设置为子范围变量

1 个答案: