UI Router multiple views share same controller

Question

I am attempting to get multiple views to use the same controller. I've tried a couple of things so far, none seem to work. By "doesnt work" I mean the controller MapController isnt instantiated and the views cannot see the controller

1

$stateProvider.state(PageStateNames.COMPONENTS_LIVEMAP, {
    url: "/components/vehicles/:vehicle/:panel",
    views: {
        "": {
            controller: "MapController as vm"
        },
        "content@app": {
            templateUrl: "....html"
        },
        "sidenav@app": {
            templateUrl: "....html"
        }
    }
});

2

$stateProvider.state(PageStateNames.COMPONENTS_LIVEMAP, {
    url: "/components/vehicles/:vehicle/:panel",
    controller: "MapController as vm"
    views: {
        "content@app": {
            templateUrl: "....html"
        },
        "sidenav@app": {
            templateUrl: "....html"
        }
    }
});

Having looked at existing questions this should work. Have I missed something?

Ram_T · Accepted Answer · 2016-12-21 09:29:58Z

0

$stateProvider.state(PageStateNames.COMPONENTS_LIVEMAP, {
    url: "/components/vehicles/:vehicle/:panel",
    views: {
        "": {
            templateUrl: "......html",
            controller: "MapController as vm"
        },
        "content@app": {
            templateUrl: "....html",
            controller: "MapController as vm"
        },
        "sidenav@app": {
            templateUrl: "....html",
            controller: "MapController as vm"
        }
    }
});

answered Dec 21, 2016 at 9:29

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

Will this not create the controller 3 times? Ideally I'd only have one for the top level state

Ram_T Over a year ago

Parent view controller data can be accessed without mentioning controller

Tushar · Accepted Answer · 2016-12-21 09:38:23Z

0

To use the same controller in a state, you can use child-parent nested state. For example :

$stateProvider.state('home', {
    templateUrl: '....html',
    controller: 'ParentController'
})

.state('home.livemap', {    // << this state will use parent controller instance, this is the dot notation to make livemap a child state of home (more info here https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views
 templateUrl: '....html'
});

answered Dec 21, 2016 at 9:38

Tushar

3,0822 gold badges28 silver badges27 bronze badges

Collectives™ on Stack Overflow

UI Router multiple views share same controller

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related