Angular-ui State - Multiple views not seeing my re

2019-06-24 19:45发布

问题:

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.

回答1:

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