父视图和控制器在状态更改时重新加载

Question

我有一个带有右抽屉视图的父级，每当我更改状态时都会重新加载该视图。我试图阻止它重新加载。

这是父状态

.state('main', {
    url: 'main',
    abstract: true,
    views: {
        '': {
            templateUrl: 'app/main/main.tpl.html',
            controller: 'mainController as vm'
        },
        'right-drawer@main': {
            templateUrl: 'app/main/right-drawer/right-drawer.tpl.html',
            controller: 'rightDrawerController as vm'
        }
    }
})

和一个子状态。在创建新客户时，我试图有条件地将右侧抽屉视图隐藏在 main.customer 之外。但是，当我使用 $state.go('main.dashboard'); 之类的东西切换状态时，它会重新加载右抽屉......我怎样才能防止它重新加载？

.state('main.customer', {
    url: '/customer',
    params: {
        company: null
    },
    views: {
        'content': {
            templateUrl: 'app/modules/my-account/my-account.tpl.html',
            controller: 'myAccountController as vm'
        },
        'right-drawer@main': {
            templateProvider: function($stateParams, $templateFactory, userService) {
                return $stateParams.company !== 'NEW'
                    ? $templateFactory.fromUrl('app/main/right-drawer/right-drawer.tpl.html', $stateParams)
                    : null;
            },
            controllerProvider: function($stateParams, userService) {
                var ctrlName = $stateParams.company !== 'NEW'
                    ? 'rightDrawerController'
                    : '';
                return ctrlName;
            },
            controllerAs: 'vm'
        }
    }
})

我尝试将 main.customer 中的视图称为 'right-drawer' 而不是 'right-drawer@main'，但这不允许我使用 templateProvider 和 controllerProvider。我认为它只是使用主要状态的正确抽屉。我也试过$state.go('main.dashboard', {}, {notify: false});和$state.go('main.dashboard', {}, {reload: false});

Answer 1

我很确定孩子无法确定 named view 是否在父母中呈现。我知道他们可以定位该视图并将其替换为另一个控制器/组件，但我相信这仍然对您没有帮助。

也许最简单的方法是在mainController 的右侧抽屉中添加ng-show 并使用$state.is 仅在您想要的状态下呈现它。

// template.html

<ui-view name="right-drawer" ng-show="vm.shouldShowDrawer()"></ui-view>

// controller.js

$scope.shouldShowDrawer = function() {
    return $state.is('main') || $state.is('main.dashboard')
}