javascript - 在 html 中声明 Controller 与父状态相同

Question

我正在使用 ui-router 并具有带有 View 的嵌套状态。我目前的 Controller 运行了两次，因为它是在 app.js 文件和 ng-controller 中声明的。我需要在 html 文件中设置 ng-controller ，因为我在嵌套状态下有动态 View ，每个 View 都有不同的 Controller 。

这是我的 app.js 文件

.state('index.region', {
    url: 'region',
    templateUrl: 'views/region.html',
    controller: 'RegionCtrl'
})
.state('index.region.detail', {
    url: '/:regionId',
    params: {
        detail: 'overview'
    },
    views: {
        'detail@index' : {
            templateUrl: function($stateParams) {
                if($stateParams.detail === 'info' || $stateParams.regionId) {
                    return 'views/regionInfo.html';
                } else if ($stateParams.detail === 'overview') {
                    return 'views/regionOverview.html';
                }
            }
        }
    },
})

views/regionOverview.html 的 HTML

<div ng-controller="RegionCtrl">

views/regionInfo.html的 HTML

<div ng-controller="RegionInfoCtrl">

Answer 1

在这种情况下，您不应该从 html 加载 Controller ，而应该从状态本身加载 Controller 。

我建议您使用 state 的 controllerProvider 选项来动态加载 Controller 。

.state('index.region', {
    url: 'region',
    templateUrl: 'views/region.html',
    controller: 'RegionCtrl'
})
.state('index.region.detail', {
    url: '/:regionId',
    params: {
        detail: 'overview'
    },
    views: {
        'detail@index' : {
            templateUrl: function($stateParams) {
                if($stateParams.detail === 'info' || $stateParams.regionId) {
                    return 'views/regionInfo.html';
                } else if ($stateParams.detail === 'overview') {
                    return 'views/regionOverview.html';
                }
            },
            controllerProvider: function($stateParams){
                 if($stateParams.detail === 'info' || $stateParams.regionId) {
                    return 'RegionInfoCtrl';
                } else if ($stateParams.detail === 'overview') {
                    return ''; //return nothing
                }
            }
        }
    },
})

Demo Plunkr