angular-ui-router nested views

Question

I have an app with 3 views (A,B,C) and 2 states(1,2)

html

<div ui-view="A"></div>
<div ui-view="B"></div>
<div ui-view="C"></div>

The two states are called list and create. In both states the template and controller of view A + B stay the same but view c should change templates and controllers. I can get view c's content to change but it refreshes view A and view B as it does ie things that are in their controllers run again.

What is the correct way to organise the router to prevent this?

js so far

$urlRouterProvider.otherwise("/basestate/list");

$stateProvider
    .state('baseState', function() {
        url:"/basestate",
        templateUrl: "basestate.html",
        controller: 'BaseStateCtrl'
    })
    .state('baseState.list', function() {
        url: "/list",
        views: {
            "viewA@baseState": {
                templateUrl: "viewA.html"
                controller: "ViewACtrl"
            },
            "viewB@baseState": {
                templateUrl: "viewB.html"
                controller: "ViewBCtrl"
            },
            "viewC@baseState": {
                templateUrl: "list.html"
                controller: "listCtrl"
            }
        }
    })
    .state('baseState.create', function() {
        url: "/create",
        views: {
            "viewA@baseState": {
                templateUrl: "viewA.html"
                controller: "ViewACtrl"
            },
            "viewB@baseState": {
                templateUrl: "viewB.html"
                controller: "ViewBCtrl"
            },
            "viewC@baseState": {
                templateUrl: "create.html"
                controller: "createCtrl"
            }
        }
    })

Yauheni Leichanok · Accepted Answer · 2015-04-09 01:48:55Z

To achieve that you basically need to freeze your viewA and viewC at the level of baseState and make that state abstract:

.state('basestate', {
    url: '/basestate',
    abstract: true,
    views: {
      "viewA": {
        templateUrl: "viewA.html",
        controller: "ViewACtrl"
      },
      "viewB": {
        templateUrl: "viewB.html",
        controller: "ViewBCtrl"
      },
      "viewC": {
        template: '<div ui-view="viewC_child"></div>'
      }
    }
})

Note that for viewC we are making a placeholder that will contain our nested view (either list or create):

.state('basestate.list',{
    url: "/list",
    views: {
        "viewC_child": {
            templateUrl: "list.html",
            controller: "ListCtrl"
        }
    }
})
.state('basestate.create', {
    url: "/create",
    views: {
        "viewC_child": {
            templateUrl: "create.html",
            controller: "CreateCtrl"
        }
    }
})

Check this plunkr and be careful with commas in your code :)

Collectives™ on Stack Overflow

angular-ui-router nested views

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related