I have a situation where I have three links on an Angular template. The first link is working fine, but the other two are not. The first link displays the cursor as a pointer, while the second and third links display the cursor as auto/default. Here are the links:
<a ui-sref="doctorMain">Doctor Main</a><p/>
<a ui-sref="doctor.chat">Doctor Chat</a><p/>
<a ui-sref="user.chat">User Chat</a>
The first link is working fine, but when clicking on the other two, I get the following error message in the console:
Error: Could not resolve 'user.chat' from state 'userMain'
at Object.transitionTo (angular-ui-router.js:3074)
at Object.go (angular-ui-router.js:3007)
at angular-ui-router.js:4057
at angular.js:17918
at e (angular.js:5552)
at angular.js:5829(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292(anonymous function) @ angular.js:17921e @ angular.js:5552(anonymous function) @ angular.js:5829
This is how I have set up routing in my app.config module.
$stateProvider
.state('doctorMain', {
url: "/doctorMain",
templateUrl: "partials/doctor/doctor-main.html",
controller: 'DoctorJoinChat',
data: {
doctor: true
}
})
.state('doctor.chat', {
url: "/doctorChat",
templateUrl: "/partials/test.html",
controller: 'DoctorJoinChat',
data: {
doctor: true
}
})
.state('userMain', {
url: "/userMain",
templateUrl: "/partials/patient/form.html",
data: {
user: true
}
})
.state('user.chat', {
url: "/userChat",
templateUrl: "/partials/test.html",
data: {
user: true
}
});