When I am using ui-router can I have one controller defined just once for multiple sub-views?

Question

I have the following states defined for ui-router:

    var questions = {
        name: 'questions',
        url: '/questions',
        views: {
            'menu': {
                templateUrl: '/Content/app/questions/partials/menu.html',
            },
            'content': {
                templateUrl: '/Content/app/common/partials/empty.html',
            },
            'status@': {
                templateUrl: '/Content/app/questions/partials/status.html',
            }
        }
    }

    var questionsContent = {
        name: 'questions.content',
        parent: 'questions',
        url: '/:content',
        views: {
            'content@': {
                templateUrl: function (stateParams) {
                    var isNumber = !isNaN(parseFloat(stateParams.content));
                    return isNumber ? '/Content/app/questions/partials/detail.html' :
                                      '/Content/app/questions/partials/content.html'
                },
            },

        }
    }

I would like to define just the one controller for this.

I've seen examples like this that do it for each view:

    'content@': {
                templateUrl: '/Content/app/home/partials/content.html',
                controller: 'HomeContentController',
            }

Is it possible for me to have one single controller that is used for all of the views and to do that would I need to specify the controller each time for each view.

Also when the /:content value changes how can I detect the change of state in my controller and then do something?

Yes, you can. Please read http://stackoverflow.com/questions/16473952/angularjs-ui-router-how-to-build-master-state-which-is-global-across-app — Sergiu Paraschiv, Sep 17 '13 at 11:34
Thanks for a link but I didn't see any way to detect state changes. How can this be done? — Alan2, Sep 17 '13 at 11:41

score 3 · Accepted Answer · answered Sep 17 '13 at 11:50

I don't know of a built-in way of watching state changes, but you could use a LocationService that wraps $state.transitionTo and broadcast something from there:

function LocationService($http, $state) {

    this.transitionTo = function ($scope, state) {
        $state.transitionTo(state);
        $scope.$root.$broadcast('stateTransition', state);
    };
}

myModule.service('LocationService', ['$http', '$state', LocationService]);

Then, insteand of using anchors with href="#root.somestate" in your views you'd use ng-click="goto('root.somestate')" and

$scope.$watch('stateTransition', function(state) {
    console.log('transitioning to ' + state);
});

$scope.goto = function(state) {
    locationService.transitionTo($scope, state);
}

in your controller.

score 1 · Answer 2 · answered Mar 05 '14 at 10:17

I think you should try following code.
$stateProvider
  .state('report',{
    views: {
      'filters': {
        templateUrl: 'report-filters.html',
        controller: function($scope){ ... controller stuff just for filters view ... }
      },
      'tabledata': {`enter code here`
        templateUrl: 'report-table.html',`enter code here`
        controller: function($scope){ ... controller stuff just for tabledata view ... }
      },
      'graph': {
        templateUrl: 'report-graph.html',
        controller: function($scope){ ... controller stuff just for graph view ... }
      },
    }
  })

When I am using ui-router can I have one controller defined just once for multiple sub-views?

2 Answers2