UI路由器URL更改，未加载嵌套视图 [英] Ui-router URL changes, nested view not loading

问题描述

我一直在开发一个应用程序，之前使用ui-router做了它，但是使用了ionic并成功了.如标题中所示，URL正确更改为我所期望的，但是此后什么也没有发生.我知道可以正确找到该模板，因为它已加载到资源中.

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.

我生成了一个yo-angle-fullstack模板，每个视图都被加载到index.html中的ui-view中，但这是一个.我使用angular-fullstack:route移位创建了/shifts，并使用angular-fullstack:controller移位和angular-fullstack:controller shiftDetails创建了控制器. url /shifts可以正确加载，但/shift/289283不能正确加载，即使url更改并且$ stateOnSuccess可以通过.

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.

    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控制器

angular.module('velociteScheduleApp')
  .controller('shiftDetailsCtrl', function ($scope) {

});

Shift.js的路线和状态

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，我在其中使用ui-sref(也尝试过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>

推荐答案

有正在工作的插栓

您快到了.必不可少的遗物是孩子的目标.在父状态及其视图 shiftDetails.html 中，我们迫切需要:

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>

将在此处注入子状态 'shifts.details' 的模板.就是这样.

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

此处

这篇关于UI路由器URL更改，未加载嵌套视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！