AngularJS ui-router 使用 $state.params 和查询导航状态

AngularJS ui-router navigating states with $state.params and queries

本文关键字:查询 导航 状态 params state ui-router 使用 AngularJS      更新时间:2023-09-26

我有一个具有多个状态的应用程序,每个状态都有嵌套视图。 一个状态有一个条件模板Url,并且基于$state.param将显示特定的HTML/JS。我想对状态的 URL 设置查询,以便我知道单击它时正在查看哪个列表项。 我无法弄清楚如何设置 url 查询并过渡到所需状态的视图。

我的状态:

 .state('index', {
        url: '/',
        views: {
            '@' : {
                templateUrl: 'views/layout.html'
            },
            'top@index' : {
                templateUrl: 'views/top.html',
                controller: function($scope, $state) {
                    $scope.logOut = function() {
                        $state.go('login');
                    };
                }
            },
            'left@index' : { templateUrl: 'views/left.html' },
            'main@index' : { templateUrl: 'views/main.html' }
        }
    })
    .state('index.list', {
        url: 'list?item',
        templateUrl: 'views/lists/list.html',
        controller: 'ListCtrl'
    })
    .state('index.list.details', {
        url: '/',
        params: {
            detail: 'overview'
        },
        controller: ctrl,
        views: {
            'details@index' : {
                templateUrl: function($stateParams) {
                    if($stateParams.detail === 'status' ) {
                        ctrl = 'StatusCtrl';
                        return 'views/details/status.html';
                    } else if ($stateParams.detail === 'overview') {
                        ctrl = 'OverviewCtrl';
                        return 'views/details/overview.html';
                    }
                }
            }
        },
    })

在我的控制器中 index.list ,这是我拥有列表并单击并填充详细信息视图的地方。

HTML & Js:

<div class="channel" ng-repeat="item in items" ng-click="viewListDetails(item)">
$scope.viewListDetails = function(item) {
    $location.search('item', item.id);
    $state.go('index.list.details', {detail: 'status'}, {reload: true})
};

我上面的JS通过函数运行,但它什么也不做!它不会为该状态设置查询或转换到所需的视图。

任何帮助不胜感激!

index.deviceList.detail

是一个定义的状态。您可能打算写index.list.details.