I am currently utilizing Angular JS (version 1.5.9) along with the Angular UI Router (version 1.0.0-rc.1). I have encountered an issue where binding values in my component controller are displaying as undefined. Below, you will find the code snippet that I am working with.
I am seeking guidance on what might be incorrect in my code and how I can resolve this particular issue.
router.config
$stateProvider.state('app.user-datshboard', {
url: '/dashboard/:user',
views: {
'header@':{
templateUrl : getView('user-navbar')
},
'main@': {
templateUrl: getView('user-dashboard')
},
'footer':{}
},
params: {
user : null
},
resolve: {
OurUser : function(){
return 'nihao';
}
}
})
component
class UserDashboardController{
constructor(API,$log,$state,$stateParams,$scope){
'ngInject';
//
$log.log(this);
this.API = API;
this.$scope = $scope;
this.$log = $log;
this.$timeout = $timeout;
this.$state = $state;
this.$stateParams = $stateParams;
this.$log.log(this.OurUser);
}
}
export const UserDashboardComponent = {
templateUrl: './views/app/components/user-dashboard/user-dashboard.component.html',
controller: UserDashboardController,
controllerAs: 'vm',
bindings: { OurUser : '=' }
}
Error Screen
[error screen][1]
Thank you