Question

我只想首先说一下我查看了与此问题相关的堆栈溢出问题，因为我找到了这个问题，而且我没有看到任何关于我遇到的问题的问题。有些相似，但不是真的。这是问题所在：

我设置了以下$ stateProvider：

$stateProvider.
    state('root', {
        url: '',
        views: {
            'ViewA': {
                templateUrl: 'ViewA.html',
                controller: ViewAController
            },
            'ViewB': {
                templateUrl: 'ViewB.html',
                controller: ViewBController
            },
            'ViewC': {
                templateUrl: 'ViewC.html',
                controller: ViewCContoller
            }
        }
    });

以下是index.Html：

<head>
    <title>Angular PoC</title>       
</head>
<body ng-controller="DashboardController">
    <!-- Account View for logging in -->
    <div ui-view="ViewA" ng-hide="currentlyLoggedIn"></div>

     <!-- Used to toggle the two main views -->
    <div ng-show="currentlyLoggedIn">
        <button ng-click="activateViewB()"> View B </button> 
        <button ng-click="activateViewC()"> View C </button>
    </div>

    <!-- These are the two main views -->
    <div ui-view="ViewB" ng-show="currentlyLoggedIn && currentViewB"></div>
    <div ui-view="ViewC" ng-show="currentlyLoggedIn && currentViewC"></div>
</body>

这是ViewC.html：

<div>
    This is ViewC
    <div ui-view="ViewCDetails"></div>
</div>

我需要让所有ViewA，B，C基本上彼此独立行动，基本上它们都是自己的状态机。他们需要都处于相同的视图中，因为所有三个人都需要保持他们的状态，即使其中一个人改变了。我遇到的最大问题是我无法初始化“ViewCDetails”，并且我无法添加任何影响其中一个视图的状态而不会影响其他两个视图。有没有办法添加只影响其中一个视图的状态而不会对其他两个视图产生负面影响？另外要注意的是，这应该是SPA，因此它不是URL驱动的。

Answer 1

$stateProvider.
    state('root', {
        url: '',
        views: {
            'ViewA': {
                templateUrl: 'ViewA.html',
                controller: ViewAController
            },
            'ViewB': {
                templateUrl: 'ViewB.html',
                controller: ViewBController
            },
            'ViewC': {
                templateUrl: 'ViewC.html',
                controller: ViewCContoller
            },
            'ViewCDetails@root': {
                templateUrl: 'ViewCDetails.html',
                controller: ...
            }
        }
    });

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

使用ui-router和AngularJS的多个嵌套ui视图

1 个答案: