I have been developing an application and previously used ui-router successfully with Ionic. The issue I am facing now is that although the URL changes correctly as expected, nothing happens afterwards. I am certain that the template is being found because it is loaded into resources.
I utilized a yo angular-fullstack template where every view is loaded into a ui-view in index.html except for one. Specifically, I created /shifts with 'angular-fullstack:route shifts' and the controllers with 'angular-fullstack:controller shift' and 'angular-fullstack:controller shiftDetails'. The URL /shifts loads properly but not /shift/289283 even though the URL changes and $stateOnSuccess is executed.
I also attempted using inline templates, but to no avail. Although not directly related, here are the controllers:
Shift Controller
angular.module('velociteScheduleApp')
.controller('ShiftsCtrl', function ($scope,$rootScope, $http, $state) {
$http.get("/api/shifts").success(function(shifts){
$scope.shifts = shifts;
})
$scope.shiftDetails = function(shiftId){
$state.go('shifts.details', {shiftId:shiftId}); //get it from shifts.html ng-click
}
});
ShiftDetails Controller
angular.module('velociteScheduleApp')
.controller('shiftDetailsCtrl', function ($scope) {
});
Shift.js Routes and States
angular.module('velociteScheduleApp')
.config(function ($stateProvider) {
$stateProvider
.state('shifts', {
url: '/shifts',
templateUrl: 'app/shifts/shifts.html',
controller: 'ShiftsCtrl'
})
.state('shifts.details', {
url: '/:shiftId',
templateUrl: 'app/shiftDetails/shiftDetails.html',
controller: 'ShiftDetailsCtrl'
})
});
shiftDetails.html
<div class="container">
<h3>Shift Details</h3>
<p>qwewqe</p>
</div>
shifts.html where I use the ui-sref (tried also with state.go() )
<li class="list-group-item" ng-repeat="shift in shifts" >
<a ui-sref="shifts.details({shiftId:shift._id})" >
{{shift.nom.length > 0 ? shift.nom : "No name"}}</a></li>