Question

我是Angular UI路由器的新手，我正在尝试使用嵌套视图创建应用程序。

我有一个index.html，它承载'header'状态和'content'状态。在内容状态中，我有两个导航栏代表全局视图和子视图。当用户打开应用程序时，默认情况下应打开全局视图。

但是，目前，每当我运行应用程序时，全局和子视图控制器都会一起执行（两个视图都被加载在一起）。

我希望的是，只有Global控制器应该首先被执行，然后当用户点击Sub视图时，它的控制器应该被执行。在此之后，每当用户在两个视图之间切换时，控制器都应重新加载。

我一直在谷歌和这里阅读，但无法找到所需的解决方案。如果可以使用ui-router，请告诉我。感谢。

的index.html

<html>    
<body>

<div class="fluid-container">
    <div ui-view="header"></div>
    <div ui-view="content"></div>
</div>

</body>
</html>

content.html

<div class="row" style="background-color: #F9F9F8">
    <div class="col-md-3"></div>

    <div class="col-md-6">
        <ul class="nav nav-pills nav-justified">
            <li class="active"><a data-toggle="pill" href="#globalView">Global</a></li>
            <li><a data-toggle="pill" href="#subView">Sub View</a></li>
        </ul>
    </div>

    <div class="col-md-3"></div>
</div>

<div class="row">    
    <br>
    <hr></hr>
    <div class="tab-content">
        <div id="globalView" class="tab-pane fade in active" ui-view="globalView"></div>
        <div id="subAccountView" class="tab-pane fade" ui-view="subView"></div>
    </div>

</div>

app.js

$urlRouterProvider.otherwise("/firstPage");
    $urlRouterProvider.when('', '/firstPage');
    $stateProvider
        .state('home', {
            url: '',
            views: {
                /** Find the views named in index.html and inject the named views**/
                'header': {
                    templateUrl: 'views/header.html',
                    controller: 'headerController',
                    controllerAs: 'headerCtrl'
                },
                'content': {
                    templateUrl: 'views/content.html',
                    controller: 'contentController',
                    controllerAs: 'contentCtrl',                        
                }
            }
        })
        .state('home.summary', {
            url: '/firstPage',
            views: {
                'globalView': {
                    templateUrl: "views/globalViewPage.html",
                    controller: "globalViewController",
                    controllerAs: "globalViewCtrl"   
                },
                'subView': {
                    templateUrl: "views/subView.html",
                    controller: "subViewController",
                    controllerAs: "subViewCtrl"   
                }                    
            }
        });

Answer 1

我通过评论中的Weedoze提供的教程找到了我的查询解决方案。以下是更新的文件。

index.html 与上述相同。

<强> content.html

<div class="row">
    <div class="col-md-3"></div>

    <div class="col-md-6">
        <ul class="nav nav-pills nav-justified">
            <li class="active"><a ui-sref=".globalView">Global</a></li>
            <li><a ui-sref=".subView">Sub View</a></li>
        </ul>
    </div>

    <div class="col-md-3"></div>
</div>

<div class="row">    
    <br>
    <hr></hr>
    <div class="tab-content">
        <div class="tab-pane fade in active" ui-view></div>
    </div>

</div>

此处添加的一点是，我之前有数据切换=＆＃34;丸＆＃34;在我的锚标签中导致在两个子视图之间导航时出现问题。在进一步挖掘之后，我发现如果删除此切换，导航将顺利进行。

<强> app.js

$urlRouterProvider.otherwise("/globalView");
    $urlRouterProvider.when('', '/globalView');
    $stateProvider
        .state('home', {
            url: '',
            views: {
                /** Find the views named in index.html and inject the named views**/
                'header': {
                    templateUrl: 'views/header.html',
                    controller: 'headerController',
                    controllerAs: 'headerCtrl'
                },
                'content': {
                    templateUrl: 'views/content.html',
                    controller: 'contentController',
                    controllerAs: 'contentCtrl',                        
                }
            }
        })                 
        .state('home.globalView', {
            templateUrl: "views/globalViewPage.html",
            controller: "globalViewController",
            controllerAs: "globalViewCtrl",
            url: '/globalView'
        })
        .state('home.subView', {
            templateUrl: "views/subView.html",
            controller: "subViewController",
            controllerAs: "subViewCtrl",
            url: '/subView'
        });

此代码允许我在两个子视图之间切换，每当我在视图之间切换时，控制器都会重新加载。

子状态更改时重新加载控制器 - Angular UI路由器

1 个答案: