Ui-router URL changes, nested view not loading

Question

I've been working on an app and had done it before with ui-router but with ionic and it worked. As in the title, the URL changes correctly to what I'd expect, however nothing happens after. I know that the template is correctly found because it's loaded into ressources.

I generated an yo angular-fullstack template and every view is loaded to an ui-view in the index.html but this one. 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 correctly but not the /shift/289283 even though the url changes and $stateOnSuccess passes.

Also tried with inline template, didn't work. Controller are not really relevant but I give it to you.

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>Détails du shift</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 : "Pas de nom"}}</a></li>

score 0 · Answer 1 · answered Jun 09 '15 at 17:30

0

are you sure taht your container is not actually hidden in your page but well generated ?

<div class="container">
    <h3>Détails du shift</h3>
    <p>qwewqe</p>
</div>

Your ui-sref call seems ok, as your routing

answered Jun 09 '15 at 17:30

aorfevre

5,034
3
21
51

Yes i'm pretty sure nothing is added to the index nor generated. – ginold Jun 09 '15 at 19:21
can you please create a codepen or plunkr with your code. It'll be much simplier to solve your issue – aorfevre Jun 09 '15 at 19:42
you can have the whole project in my github folder : https://github.com/ginold/Schedule hopefully mongoDB, bower install and grunt serve are enough... if not, those are the locations of the files I speak of : HTML with ui-sref : client/app/shifts/shifts.html ||| HTML shift.details : client/app/shiftDetails/shiftDetails.html ||| JS routes states : client/app/shifts/shifts.js ||| JS shift controller with state.go() : client/app/shifts/shifts.controller.js ||| JS shiftDetails controller : client/app/shiftDetails/shiftDetails.controller.js ||| Index file with ui-view : client/index.html – ginold Jun 09 '15 at 22:32
@Ginod, I'm not a debugger. if you want to receive help, provide them online tools that that can easily investigate your issue. I'm not willing to clone your project. If you do not provide a codepen or plunkr, I'll not investigate your issue – aorfevre Jun 10 '15 at 00:28

score 0 · Answer 2 · answered Jun 10 '15 at 05:29

0

There is a working plunker

You are almost there. The essential missing piece is the target for a child. In our parent state, and its view shiftDetails.html, we desperately need the:

<div ui-view=""></div>

That will be the place, where the template of the child state 'shifts.details' - will be injected. That's it.

Check it here

answered Jun 10 '15 at 05:29

Radim Köhler

122,561
47
239
335

yeah this worked, thanks ! I didn't think that I would need another ui-view because every other view rendered correctly... Now I'm getting the shift with its ID in the shiftDetails.controller but the data isn't showing, even though it's loaded when I console.log it within the success(), but it's not there outside. Is it due to the asynchronousity ? – ginold Jun 10 '15 at 20:47
Now it is not... (I guess). But I would suggest, you should accept this question, create new, with new issue, and provide a plunker. You can even take mine and adjusted... That will give more details to larger audience... Does it make senes? – Radim Köhler Jun 11 '15 at 04:47
yes it does, but I already managed to answer my issue : it actually was due to async. I created a separate service .getShift(callback) and everything works fine ;) – ginold Jun 14 '15 at 18:47