具有ui-router和AngularJS的多个嵌套ui视图

发布时间：2020-12-17 08:12:11 所属栏目：安全来源：网络整理

导读：我只是想说起来，我看到了与这个问题相关的堆栈溢出问题，我可以找到，我没有看到有关我遇到的问题的任何问题。有些是相似的，但不是真的。这是问题：我有以下$ stateProvider设置： $stateProvider. state('root',{ url: '',views: { 'ViewA': { templateU

我只是想说起来，我看到了与这个问题相关的堆栈溢出问题，我可以找到，我没有看到有关我遇到的问题的任何问题。有些是相似的，但不是真的。这是问题：

我有以下$ 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驱动。

$stateProvider.
    state('root',controller: ViewCContoller
            },'ViewCDetails@root': {
                templateUrl: 'ViewCDetails.html',controller: ...
            }
        }
    });

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!