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?

score 0 · Answer 1 · answered Dec 21 '16 at 09:29

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 '16 at 09:29

Mr_Perfect

8,254
11
35
62

Will this not create the controller 3 times? Ideally I'd only have one for the top level state – Chris Dec 21 '16 at 09:31
Parent view controller data can be accessed without mentioning controller – Mr_Perfect Dec 21 '16 at 09:34

score 0 · Answer 2 · answered Dec 21 '16 at 09:38

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

UI Router multiple views share same controller

2 Answers2