CODEWITHSUNDEEP
angularjsangular-ui-router
kitimenpolku
kitimenpolku

Reputation: 2604

Angular-ui State - Multiple views not seeing my resolve data

For some reason, my resolvedData is not seeing by controllers when using multiple named views (angular-ui ui-router). Has anyone faced this issue?

$stateProvider
    .state('page',{
           abstract: true,
           templateUrl: ...,
           controller: abstractController
    })
    .state('page.index',
           url: '/page',
           resolve : {
               resolvedData: function(CONSTANTS){ return CONSTANTS.data;}
           },
           views: {
               home: {templateUrl: ..., 
                      controller: function(resolvedData){
                        ....
                      }
               },
               list: {templateUrl: ..., 
                      controller: function(resolvedData){
                        ....
                      }
               },
               edit: {templateUrl: ..., 
                      controller: function(resolvedData){
                        ....
                      }
               }
           }
     )

The error it gives me is: Error: [$injector:unpr] Unknown provider: resolvedDataProvider <- resolvedData. It is somehow interesting because it happens only in one of the views but not in the others.

Upvotes: 4

Views: 4085

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

I created small working example, showing that your stuff should work

This would be the CONSTANTS:

.factory('CONSTANTS', function() {
    return { data: { name :  "some name", number : "some number"} };
})

And the same (just explicitly annotated DI) state def:

  // States
  $stateProvider
    .state('page', {
      abstract: true,
      template: '<div>' 
       + '<div ui-view="home"></div>' 
       + '<div ui-view="list"></div></div>',
      controller: 'abstractController'
    })
    .state('page.index', {
      url: '/page',
      resolve: {
        resolvedData: ['CONSTANTS',
          function(CONSTANTS) {
            return CONSTANTS.data;
          }
        ]
      },
      views: {
        home: {
          templateUrl: 'tpl.html',
          controller: ['resolvedData','$scope',
            function(resolvedData, $scope) {
              console.log(resolvedData);
              $scope.resolvedData = resolvedData;
            }
          ],
        },
        list: {
          template: '<div>list view</div>'
        }
      }
    })

So, the draft of the resolve used above is working. It is the right way...The resolve function is provided with some service ... and returns its property data.

Check that all here

Upvotes: 3

Related Questions