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

问题描述

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

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

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

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

控制器:

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 });
        }

    }
}

查看:

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

路由:

 .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'
    });`

推荐答案

原来，有必要指向父级的ui视图，并使用url将其弄乱了.将details.reportParent路由替换为以下

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'
            },
        },
    });

还要确保在父视图中，将数据放入ui-view(在本例中为<div ui-view ='resultsTab'></div>

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被清除...为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！