Ui-router URL改变，嵌套视图未加载

Question

我一直在做一个应用程序，以前用ui-router做过，但用ionic做过，它工作了。在标题中，URL正确地更改为我所期望的，但是之后什么也没有发生。我知道模板被正确地找到了，因为它已经加载到资源中了。

我生成了一个angular-fullstack模板，每个视图都被加载到index.html中的ui-view中，除了这个。我用angular-fullstack:route shift创建了/shift，用angular-fullstack:controller shift和angular-fullstack:controller shiftDetails创建了/shift。url /shifts加载正确，但/shift/289283加载不正确，即使url更改并且$ statonsuccess通过。

也尝试内联模板，没有工作。控制器不是很相关，但我给你。

<<h3>转变控制器/h3>

    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>

Answer 1

您确定您的容器实际上并没有隐藏在您的页面中，而是生成良好?

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

您的ui-sref调用似乎没问题，因为您的路由

Answer 2

有一个可工作的活塞

你就快到了。缺少的关键部分是，即子对象的目标。在父状态和它的视图 shiftDetails.html 中，我们迫切需要:

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

这就是子状态 'shifts.details' -的模板被注入的地方。就是这样。

点击这里