CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangular-ui-router
Jonathan Bender
Jonathan Bender

Reputation: 1909

Angular UI-Router pass resolve to child onEnter

I'm trying to pass a previously-resolved result from a parent to a modal instance that is instantiated onEnter, however the controller reports that it's an unknown provider:

Error: [$injector:unpr] Unknown provider: resolvedRouteProvider <- resolvedRoute

Is there another way to inject this value, or am I restricted to only calling services from onEnter functions?

For reference, the error occurs when navigating to a state like the child below:

$stateProvider
  .state('parent',
    resolve:
      resolvedRoute: (Restangular) -> Restangular.all('route')
  )
  .state('child',
    parent: 'parent',
    onEnter: ($modal) ->
      $modal.open(
        templateUrl: 'templates/modal.html',
        controller: 'ModalCtrl'
      )
  )

The controller is super-simple at this point:

.controller('ModalCtrl', ($scope, $modalInstance, resolvedRoute) ->
  $scope.object = {}
  $scope.createObject = ->
    resolvedRoute.all('objects').post({object: $scope.object})
)

Plunker with failing resolve

Upvotes: 2

Views: 3636

Answers (2)

Avenir &#199;okaj
Avenir &#199;okaj

Reputation: 2904

Check out this example which it shows how you can inject data that is resolved to the onEnter function https://github.com/angular-ui/ui-router/wiki

like so:

$stateProvider.state("contacts", {
  template: '<h1>{{title}}</h1>',
  resolve: { title: 'My Contacts' },
  controller: function($scope, title){
    $scope.title = 'My Contacts';
  },
  onEnter: function(title){
    if(title){ ... do something ... }
  },
  onExit: function(title){
    if(title){ ... do something ... }
  }
})

Upvotes: 0

Jonathan Bender
Jonathan Bender

Reputation: 1909

It turns out that you just need to pass another resolve through to the modal as well, e.g.

$stateProvider
  .state('parent',
    resolve:
      parentResolve: (Restangular) -> Restangular.all('route')
  )
  .state('child',
    parent: 'parent'
    url: '/child'
    resolve:
      childResolve: (Restangular) -> Restangular.one('bar')
    onEnter: ($modal) ->
      $modal.open(
        templateUrl: 'templates/modal.html',
        controller: 'ModalCtrl'
        resolve:
          parentResolve: -> parentResolve
          childResolve: -> childResolve
      )
  )

The ModalCtrl will now have access to the parentResolve and the childResolve.

Please note: the resolves have to be returned from functions, so simply resolving the same object will not work. 

resolve:
  parentResolve: parentResolve

Upvotes: 4

Related Questions