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

Question

我一直在开发应用程序并且之前使用ui-router完成了它但是使用了离子并且它有效。与标题中一样，URL正确地改变了我所期望的，但之后没有任何反应。我知道模板是正确找到的，因为它已加载到资源中。

我生成了一个yo angular-fullstack模板，每个视图都加载到index.html中的ui-view但是这个。我用angular-fullstack创建/移位：路由移位和带有angular-fullstack的控制器：controller shift和angular-fullstack：controller shiftDetails。尽管网址已更改且$ stateOnSuccess已通过，但网址/shifts正确加载但未加载/shift/289283。

还尝试使用内联模板，但没有工作。控制器并不真正相关，但我会把它给你。

换档控制器

    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>

shifting.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

有a working plunker

你快到了。对于孩子来说，基本缺失的部分是目标。在我们的父状态及其视图 shiftDetails.html 中，我们迫切需要：

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

这将是注入子状态 'shifts.details' 模板的地方。那就是它。

检查here