AngularJS 在不重新加载且参数没有值的情况下转到状态

Question

在我的应用程序中，我有一个指令查看 $location.search() 来决定是否应该显示该指令。代码看起来有点像这样：

function refresh(stateName) {
    var hideSplash = $location.search().nosplash;

    if (hideSplash === true) {
        model.hide = true;
    } else {
        var templateUrl = getTemplateUrl(stateName);
        if (templateUrl && viewed.indexOf(templateUrl) === -1) {
            viewed.push(templateUrl);
            model.templateUrl = templateUrl;
            model.hide = false;
            model.finished = false;
        }
    }
};

这很有魅力。如您所知，在这种情况下，nosplash 是否有值并不重要，只需预先设置即可。在我的例子中，path 看起来像这样：

/cameras/results?nosplash

在那条特定路线上，我将其定义为：

angular.module('widget.wizard')
    .config(pickRoutes);

function pickRoutes($stateProvider) {

    $stateProvider
        .state('home.category.results', configurePickRoute());

    function configurePickRoute() {
        return {
            url: '/results?expanded',
            reloadOnSearch: false,
            views: {
                '': {
                    templateUrl: 'scripts/results/results.html',
                    controller: 'ResultsController',
                    controllerAs: 'controller'
                }
            },
            resolve: {
                bypass: bypassRegistration
            },
            data: {
                pageTitle: 'Your PiiiCKs'
            }
        };
    };

    //////////////////////////////////////////////////

    /* @ngInject */
    function bypassRegistration($location, pkRegisterService) {
        if (!pkRegisterService.options.bypass) // Checks to see if has been set elsewhere
            pkRegisterService.options.bypass = $location.search().bypass;
    };
};

如您所见，我希望它有一个查询参数 expanded。目前，我的控制器有这个：

self.expanded = $stateParams.expanded;

//////////////////////////////////////////////////

function expand() {
    self.expanded = true;
    $state.go('home.category.results', { expanded: true });
};

在我看来，我有这个 html:

<div class="panel-more" ng-if="controller.picks">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <button class="btn btn-success" ng-click="controller.expand()" ng-if="!controller.expanded">See your other matches</button>
            </div>
        </div>
    </div>
</div>

<div class="products" ng-if="controller.expanded">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>Your other matches</h2>
            </div>
        </div>
    </div>
    <div class="product" pk-product="product" pk-category="controller.category" ng-repeat="product in controller.notPicked"></div>
</div>

如您所见，如果 expanded 属性为真，则隐藏按钮并显示 "Other matches"。这确实有效，但 url 看起来像这样：

/cameras/results?expanded=true

我希望它看起来像这样：

/cameras/results?expanded

有什么方法可以做到这一点，但仍然有 reloadOnSearch: false？

Answer 1

请试试这个：

URL 配置：

url: '/results/:params?'

获取值：

var params = JSON.parse($stateParams["params"]);
console.log(params.expanded);

转到州：

$state.go('home.category.results', { expanded: true });

AngularJS 在不重新加载且参数没有值的情况下转到状态

AngularJS goto state without reloading and having a parameter with no value

angularjs

angular-ui-router