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是否在父母中呈现。我知道他们可以锁定该视图并将其替换为另一个控制器/组件，但是我仍然认为这对您没有帮助。

也许最简单的方法是在ng-show的右侧抽屉上添加mainController并使用$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')
}

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

1 个答案: