Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I am trying to load a controller based on a stateparam to make it reusable

.state("dashboard.item.detail", {
    url: "/detailId/:detailId/detailName/:detailName",
    views: {
       'main@': {
            templateUrl: function ($stateParams){
                //move this to a util function later
                var tempName = unescape($stateParams.detailName);
                tempName = tempName.replace(/\s/g, "-");
                return '../partials/slides/' + tempName + '.html';
            },
            resolve: {
                DetailData: ['DetailService', function(DetailService){
                    return DetailService.getDetails();
                }]
            },
            controller: function ($stateParams) {
                console.log( $stateParams.detailName + 'Ctrl');
                return $stateParams.detailName + 'Ctrl';
            }
        }
      }
})

Controller

    .controller('NemtCtrl', ['$scope', '$rootScope', 'DetailData', function ($scope, $rootScope, detailData) {
    console.log(detailData);
}]);

The controller will work if I remove the function and just use (console will log detailData)

controller: 'NemtCtrl'

But won't work if I do:

controller: function ($stateParams) {
    return 'NemtCtrl';
}

What am I doing wrong here? Is there a better way to do this?

share|improve this question
up vote 6 down vote accepted

What is happening here is that when you write this:

controller: 'NemtCtrl'

You tell angular to get the controller named 'NemtCtrl'. But when you on the other hand write this:

controller: 
   function ($stateParams) {
        return 'NemtCtrl';
   }

you are defining a controller for that state.

Update

According to the ui-router docs the way to do is as follows:

$stateProvider.state('contacts', {
  template: ...,
  controllerProvider: function($stateParams) {
      var ctrlName = $stateParams.type + "Controller";
      return ctrlName;
  }
})

You can read more about it here

Update 2

For your case it would be something like:

.state("dashboard.item.detail", {
  url: "/detailId/:detailId/detailName/:detailName",
  views: {

    'main@': {
      templateUrl:
        function ($stateParams){
          //move this to a util function later
          var tempName = unescape($stateParams.detailName);
          tempName = tempName.replace(/\s/g, "-");

          return '../partials/slides/' + tempName + '.html';
        },
      resolve: {
        DetailData: ['DetailService',
          function(DetailService){
            return DetailService.getDetails();
          }]
      },
      controllerProvider: //Change to controllerProvider instead of controller
        function ($stateParams) {
          //console.log( $stateParams.detailName + 'Ctrl');
          return $stateParams.detailName + 'Ctrl';
        }
    }

  }

})
share|improve this answer
    
yep thats what i did! thanks!! – atsituab Oct 16 '14 at 20:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.