CODEWITHSUNDEEP
angularjsangular-ui-router
muenchdo
muenchdo

Reputation: 2181

Inject resolved property into controller of abstract parent

I have defined my UI-Router states like this:

$stateProvider.state('contact', {
        url: '/contactDemo',
        views: {
            'main': {
                controller: 'contactMainController',
                templateUrl: 'templates/contact.tpl.html'
            }
        }
    }).state('contact.details', {
        abstract: true,
        controller: 'contactDetailsController',
        templateUrl: 'templates/contact.details.tpl.html'
    }).state('contact.details.add', {
        url: '/add'
    }).state('contact.details.filter', {
        url: '/filter/{filterId}'
    }).state('contact.details.filter.record', {
        url: '/record/{recordId}',
        resolve: {
            record: ['$stateParams', 'Restangular', function($stateParams, Restangular) {
                return Restangular.one('records', $stateParams.recordId).get();
            }]
        }
    }).state('contact.details.filter.record.edit', {
        url: '/edit'
    });

Now I would like to inject my resolved record into contactDetailsController. If I do so, I get an Unknown provider error. I can't move the resolve into the abstract state, because from there I can't access the id inside $stateParams.

If I move the controller property down into the child state, my controller is never invoked.

Does anybody know how I can get the resolved property injected into the controller of an abstract parent state?

Upvotes: 1

Views: 1275

Answers (1)

Radim Köhler
Radim Köhler

Reputation: 123901

As documented here, resolve could be inherited. NOT injected from child to parent.

Inherited Resolved Dependencies

New in version 0.2.0

Child states will inherit resolved dependencies from parent state(s), which they can overwrite. You can then inject resolved dependencies into the controllers and resolve functions of child states.

$stateProvider.state('parent', {
      resolve:{
         resA:  function(){
            return {'value': 'A'};
         }
      },
      controller: function($scope, resA){
          $scope.resA = resA.value;
      }
   })
   .state('parent.child', {
      resolve:{
         resB: function(resA){
            return {'value': resA.value + 'B'};
         }
      },
      controller: function($scope, resA, resB){
          $scope.resA2 = resA.value;
          $scope.resB = resB.value;
      }

Simply solution where:

  1. $stateParam is defined in the child
  2. the resolve dependent on it should be injected into parent

cannot work - because one parent will be shared for many children.

Parent will stay while the children's params will differ..

Upvotes: 1

Related Questions