Question

我有一个具有多个状态的应用，每个状态都有嵌套视图。一个州有一个条件templateUrl，基于$state.param将显示特定的HTML / JS。我想在状态的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＆amp; 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运行通过该功能，但它什么也没做！它不会设置查询或转换到该状态的所需视图。

感谢任何帮助！

Answer 1

index.deviceList.detail不是已定义的状态。您可能打算写index.list.details。

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

1 个答案: