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

查看:22
本文介绍了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 更改,嵌套视图未加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆