Question

我正在使用ui-router并且具有带有视图的嵌套状态。我目前让我的控制器运行两次，因为它在app.js文件和ng-controller中声明。我需要在html文件中设置ng-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加载控制器，控制器应该从状态本身加载。

我建议您使用controllerProvider状态选项动态加载控制器。

.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

在html中声明控制器与父状态相同

1 个答案: