Угловой контроллер Родительский / дочерний контекст устанавливает родительскую переменную в дочернюю переменную области

0

У меня возникла проблема с настройкой заголовка в моем приложении, чтобы соответствовать текущему состоянию приложения. Я использую $ 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, заголовок изменяется на правильный заголовок "Заголовок отчета", но когда я перехожу назад, название остается "Заголовок отчета".

Каков правильный способ сделать это в угловом? Я думал, что установка поля перезагрузки состояния обеспечит повторную выборку переменных $ scope в активном контроллере.

Теги:

1 ответ

1
Лучший ответ

Я думаю, что трюк заключается в использовании ui-sref-opts="{reload: true}" это перезагрузит абстрактный контроллер, где вы можете установить заголовок на основе набора данных для каждого маршрута. Также добавление заголовка в $scope без использования данных будет работать с перезагрузкой по ссылке ui-sref.

Пожалуйста, ознакомьтесь с демонстрацией ниже или в этой скрипке.

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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню