CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-components
Федор Усаков
Федор Усаков

Reputation: 1255

Angular UI router - can't get my data in component after resolve

I have a router configured like this:

.state('home.view-profile', {
    url: '/view-profile/:profileUrl',
    template: '<view-profile input="$resolve.profileData"></view-profile>',
    title: 'View Profile',
    resolve: {profileData: function(artistService, $stateParams){
      return artistService.getArtist($stateParams.profileUrl).then((data) => {
        const timer = new Date();
        console.log(timer.getSeconds() + ':' + timer.getMilliseconds());
        console.log(data.data.artist);
        return data.data.artist;
      });
    }
  }
  })

and the component

module.component('view-profile', {
templateUrl: 'view-profile/view-profile.component.html',
    bindings: {
      input: '='
    },
    controller: ['$state', '$scope', '$stateParams', function ($state, $scope, $stateParams) {
      const model = this;
      console.log('***************');
      console.log(model.input);
   }]
});

I could see that data.data.artist is valid and accessible from the log during resolving process, but inside the component the input is always undefined J just don't understand why is this happening?

Upvotes: 0

Views: 178

Answers (2)

Федор Усаков
Федор Усаков

Reputation: 1255

sorry and thanks for your help! I just found out out the issue. The version of the ui-router was downgraded somehow during our multi-devs workflow. Some of the developers installed 0.2.1 instead of the latest 0.3.x, i merged and that was the problem. Only 0.3.x router supports sending $resolve.param to component bindings.
After upgrading - everything works fine. Only my self-confidence is harmed...

Upvotes: 1

cyberwombat
cyberwombat

Reputation: 40153

Have you tried resolving the promise in the controller?

model.input.then(function(res) { console.log(res); }

Upvotes: 0

Related Questions