Question

我试图获得多个视图以使用相同的控制器。到目前为止，我已经尝试过几件事，但似乎都没有效果。通过＆＃34;不起作用＆＃34;我的意思是控制器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"
        }
    }
});

看了existing questions这应该有效。我错过了什么吗？

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

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

2 个答案: