reload controller when child state is changed - Angular UI Router

Question

I'm new to Angular UI Router and am trying to create an application with nested views.

I've an index.html which hosts the 'header' state and the 'content' state. Within the content state, I have two nav bars representing a Global view and a Sub view. The Global View should open by default when the user opens the application.

However, at present, whenever I run the application, both Global and Sub view controllers are getting executed together(both views are getting loaded together).

What I wish instead is that only Global controller should get executed at first and then when the user clicks on Sub view, its controller should get executed. Following this, whenever the user switches between both the views, the controllers should reload.

I have been reading through Google and here but wasn't able to find the required solution. Please let me know if this is possible using ui-router. Thanks.

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

Check this tutorial scotch.io/tutorials/angular-routing-using-ui-router — Weedoze
– Weedoze, Commented Jul 5, 2016 at 9:04
Thanks Weedoze. This tutorial was quite helpful. I've posted my answer below. — Yash Kapila
– Yash Kapila, Commented Jul 6, 2016 at 1:31

Yash Kapila · Accepted Answer · 2016-07-06 01:30:49Z

I found the solution to my query by going through the tutorial provided by Weedoze in the comments. Below are the updated files.

index.html remains the same as above.

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>

A point to add here is that I was earlier having data-toggle="pill" in my anchor tag which was causing issues in navigating between the two child views. After digging further, I found that if this toggle is removed, the navigation works smoothly.

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

This code lets me switch between the two child views and whenever I toggle between the views, the controllers get reloaded.

Collectives™ on Stack Overflow

reload controller when child state is changed - Angular UI Router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related