ui-router 状态恢复到父级，ui-view 被清除......为什么?

问题描述

我正在使用 ui-router 在 AngularJS 中实现选项卡.问题是，一旦我单击创建的任何链接，状态会立即发生变化(如 url 中所示)，并且 ui-view 会短暂填充，然后消失.没有与 ui-view 相关的样式.有任何想法吗...?

问题在于点击 ReportParent 视图(父视图)上的链接.

控制器:

function ReportParentController($scope, $http, $q, $interval, ReportParentService, $stateParams, $state) {var vm = 这个；vm.dataArray = [];vm.CustomerID = $stateParams.CustomerID;vm.TabList = [];ReportParentService.getReportList(vm.CustomerID).then(function (response) {vm.TabData = 响应；updateUrlValue(vm.TabData);createTabList(vm.TabData);});函数 updateUrlValue(data) {for (CurrentTabItem = 0; CurrentTabItem < data.length; CurrentTabItem++) {数据[CurrentTabItem].Url = "details.reportParent."+ data[CurrentTabItem].NameNoSpaces + "Report";}}函数 createTabList(data) {for (CurrentTabItem = 0; CurrentTabItem < data.length; CurrentTabItem++) {vm.TabList.push({ id: CurrentTabItem, Name: data[CurrentTabItem].Name, NameNoSpaces: data[CurrentTabItem].NameNoSpaces, Url: data[CurrentTabItem].Url });}}}

查看:

 
<a ng-repeat="vm.TabData 中的 Tab" ui-sref={{Tab.Url}}>{{Tab.Name}}</a>
<div ui-view ></div>

路由:

 .state('details.reportParent.WindowsServerReport', {url: '/windowsServerReport',意见:{'@details.reportParent':{templateUrl: '路由/WindowsServerReport',控制器:'WindowsServerReportController'，控制器为:'vm'，},},}).state('details.reportParent', {url: '/reportParent',templateUrl: 'Routing/ResultReportParent',控制器:'报告父控制器'，控制器为:'vm'});`

解决方案

事实证明有必要指向父级上的 ui-view，而使用 url 会将其搞砸.将 details.reportParent 路由替换为以下内容

.state('details.reportParent', {意见:{'resultsTab@details':{templateUrl: 'Routing/ResultReportParent',控制器:'报告父控制器'，控制器为:'vm'},},});

还要确保在父视图中，您将数据放入 ui-view 在这种情况下 <div ui-view ='resultsTab'></div>

I'm implementing tabs in AngularJS, using ui-router. The problem is once I click on any of the links that are created, the state momentarily changes (as seen in the url) as well as ui-view is populated for a brief moment, then disappears. There are no styles associated with ui-view. Any ideas...?

The issue is in clicking a link on the ReportParent view (the parent).

Controller:

function ReportParentController($scope, $http, $q, $interval, ReportParentService, $stateParams, $state) {
    var vm = this;
    vm.dataArray = [];
    vm.CustomerID = $stateParams.CustomerID;

    vm.TabList = [];

    ReportParentService.getReportList(vm.CustomerID).then(function (response) {
        vm.TabData = response;
        updateUrlValue(vm.TabData);
        createTabList(vm.TabData);
    });

    function updateUrlValue(data) {
        for (CurrentTabItem = 0; CurrentTabItem < data.length; CurrentTabItem++) {
            data[CurrentTabItem].Url = "details.reportParent." + data[CurrentTabItem].NameNoSpaces + "Report";
        }
    }

    function createTabList(data) {
        for (CurrentTabItem = 0; CurrentTabItem < data.length; CurrentTabItem++) {
            vm.TabList.push({ id: CurrentTabItem, Name: data[CurrentTabItem].Name, NameNoSpaces: data[CurrentTabItem].NameNoSpaces, Url: data[CurrentTabItem].Url });
        }

    }
}

View:

 <div class="project-tab-menu ui right secondary menu" style="margin-right:1em;">
        <a ng-repeat="Tab in vm.TabData" ui-sref={{Tab.Url}}>{{Tab.Name}}</a>
    </div>

    <div ui-view ></div>

Routing:

 .state('details.reportParent.WindowsServerReport', {
        url: '/windowsServerReport',
        views: {
            '@details.reportParent': {
                templateUrl: 'Routing/WindowsServerReport',
                controller: 'WindowsServerReportController',
                controllerAs: 'vm',
            },
        },
    })
    .state('details.reportParent', {
        url: '/reportParent',
        templateUrl: 'Routing/ResultReportParent',
        controller: 'ReportParentController',
        controllerAs: 'vm'
    });`

解决方案

Turns out it's necessary to point to a ui-view on the parent, and using a url messes this up. Replace the details.reportParent route with the following

.state('details.reportParent', {
        views: {
            'resultsTab@details': {
                templateUrl: 'Routing/ResultReportParent',
                controller: 'ReportParentController',
                controllerAs: 'vm'
            },
        },
    });

Also make sure that in the parent view, you're putting data into a ui-view in this case <div ui-view ='resultsTab'></div>

这篇关于ui-router 状态恢复到父级，ui-view 被清除......为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！