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

问题描述

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

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

也试过内联模板，没用.控制器并不真正相关，但我给你.

换档控制器

 angular.module('velociteScheduleApp').controller('ShiftsCtrl', function ($scope,$rootScope, $http, $state) {$http.get("/api/shifts").success(function(shifts){$scope.shifts = 班次；})$scope.shiftDetails = 函数(shiftId){$state.go('shifts.details', {shiftId:shiftId});//从 shifts.html ng-click 中获取}});

ShiftDetails 控制器

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

Shift.js 路由和状态

angular.module('velociteScheduleApp').config(function ($stateProvider) {$stateProvider.state('转变', {网址:'/班次'，templateUrl: 'app/shifts/shifts.html',控制器:'ShiftsCtrl'}).state('shifts.details', {url: '/:shiftId',templateUrl: 'app/shiftDetails/shiftDetails.html',控制器:'ShiftDetailsCtrl'})});

shiftDetails.html

<h3>details du shift</h3><p>qwewqe</p>

shifts.html 我使用 ui-sref(也尝试过 state.go() )

解决方案

有 一个工作 plunker

你快到了.最重要的缺失部分是孩子的目标.在我们的父状态及其视图 shiftDetails.html 中，我们非常需要:

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

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

在此处

查看

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>

解决方案

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

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