сделать контроллер переменной как заголовок страницы в угловом состоянии

Question

.state('access.surveys', {
                url: '/surveys',
                templateUrl: 'app/tpl/feedback/index.html',
                data: {
                    pageTitle: 'XYZ Client Survey'
                },
                controller: 'surveysCtrl',
                resolve: {
                    deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                        return $ocLazyLoad.load([], {
                            insertBefore: '#lazyload_placeholder'
                        })
                            .then(function () {
                                return $ocLazyLoad.load([
                                    'app/controllers/surveysCtrl.js',
                                ]);
                            });
                    }]
                }
            })

У меня есть переменная $ scope.companyname внутри "surveyysCtrl". Как я могу установить заголовок моей страницы что-то вроде:

pageTitle: '{{companyname}} Client survey'

Answer 1

Вы можете создать директиву, которая будет прослушивать переходы от ui-router

app.directive('pageTitle', function () {

    var controller = ['$scope', '$transitions', function ($scope, $transitions) {

          $scope.title = '';
          $transitions.onSuccess({}, function(transition) {
              $scope.title = transition.to().data.pageTitle;
            });

      }],
      template = '<h1>{{title}}</h1><ul>';

      return {
          restrict: 'EA',
          controller: controller,
          template: template
      };
});

Затем добавьте директиву title в html

<page-title />

Примечание: $ transitions используется в ui.router> = 1.0.

Для предыдущей версии введите $ rootScope и прослушайте событие $ stateChangeSuccess

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
            $scope.title =toParams.pageTitle;
 })