UI路由器多个视图共享相同的控制器

Question

我正在尝试获取多个视图以使用同一控制器。到目前为止，我已经尝试了几件事，似乎没有任何事情可以。通过"不工作"，我的意思是控制器MapController未实例化，视图看不到控制器

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

研究了现有问题，这应该有效。我错过了什么吗？

Answer 1

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

Answer 2

要在状态下使用相同的控制器，您可以使用子父母嵌套状态。例如：

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