make controller variable as page title in angular state

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',
                                ]);
                            });
                    }]
                }
            })

I have a variable $scope.companyname inside "surveysCtrl" . how can i set my page title to something like :

pageTitle: '{{companyname}} Client survey'

You can define a controller at the `` level and share a variable for the companyname. Same as this [question](https://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view) — Senal, Apr 27 '18 at 06:37

Marcus Höglund · Answer 1 · 2018-04-27T08:17:28.300

You could create a directive which listen to transition hooks from the 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
      };
});

Then add the title directive in the html

<page-title />

Note: $transitions is used in ui.router >= 1.0.

For previous version inject $rootScope and listen for $stateChangeSuccess event

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

make controller variable as page title in angular state

1 Answers1