Question

我使用具有5个状态的ui.router，每个状态都嵌套在前一个状态中。每个州都有针对不同用户类型的多个视图。唯一定义了网址的州是第一个：＆＃34;＆＃34;最后：＆＃34; /：params＆＃34;这样所有的状态都会加载到同一窗口中。

现在，由于每个状态都在窗口中，我想解析url params来控制应用程序，而不需要设置url模型，即我想采用任意数量的无序参数并将它们应用于每个状态在祖先身上有$ stateParams $ scoped的比赛。

这样我们保留浏览器历史记录/书签以匹配ui-state，尽管从不需要实际导航到别处。

这怎么可能？

angular.module('ecoposApp').config(function($stateProvider, $urlRouterProvider, $anchorScrollProvider) {

$stateProvider.
    state('ecoApp', {
        url:'/',
        templateUrl:'views/main.html',
        onEnter: function(){
            console.log('ecoApp State');
        },
        onExit: function(){
            console.log('goodbye ecoApp state');
        }
    }).
    state('ecoApp.nav',{

        views:{
            admin:{

                template:'<h2 href ng-click="$state.go(\'^\')">Nav Yolo 1</h2>'
            },
            user:{
                template:'<h2 href ng-click="$state.go(\'^\')">Nav Yolo 2</h2>'
            }
        },
        onEnter: function(){
            console.log('NAV State');
        },
        onExit: function(){
            console.log('goodbye Navigation state');
        }
    }).
    state('ecoApp.nav.not',{
        views:{
            admin:{
                template:'<h3 href ng-click="$state.go(\'^\')">Notifications Yolo 1</h3>'
            },
            user:{
                template:'<h3 href ng-click="$state.go(\'^\')">Notifications Yolo 2</h3>'
            }
        },
        onEnter: function(){
            console.log('notifications state');
        },
        onExit: function(){
            console.log('goodbye Notifications state');
        }
    }).
    state('ecoApp.nav.not.tools',{

        views:{
            admin:{
                template: '<h4 href ng-click="$state.go(\'^\')">Tools Yolo 1</h4>'
            },
            user:{
                template: '<h4 href ng-click="$state.go(\'^\')">Tools Yolo 2</h4>'
            }
        },
        onEnter: function(){
            console.log('tools state');
        },
        onExit: function(){
            console.log('goodbye tools state');
        }
    }).
    state('ecoApp.nav.not.tools.settings',{
        url:':params',
        views: {
            admin:{
                template:'<a href ng-click="$state.go(\'^\')">Settings Yolo 1</a></div>',
                controller: function(){

                }
            },
            user:{
                template:'<a href ng-click="$state.go(\'^\')">Settings Yolo 2</a></div>'
            }
        },
        onEnter: function(){
            console.log('settings state');
        },
        onExit: function(){
            console.log('goodbye settings state');
        }
    });

Answer 1

在我们的最后一个州，我们有 -

url:'*path?access_level&preferences'

这说$ stateParams上的路径对象可以等于任何东西，并查找access_level和preferences查询，这样/ settings？access_level = admin＆amp; preferences = shop会给出这个对象 -

$stateParams: {path:settings,access_level:admin,preferences:shop}

然后我们在我们的应用程序中使用.run fn -

$rootScope.$stateParams = $stateParams;

在最后一个州的内部输入fn -

myService.params.data = $stateParams;
if(/^\/settings(\/.*)?$/.test($stateParams.path)){
    myService.view = 'admin@ecoApp.nav.not.tools.settings';
            }

//数据对象充当状态占位符，因此即使切换状态，也存在相同的对象。

在我们的主控制器中，我们注入myService - $ scope.params = myService.params.data; $ scope.myView = myService.params.data.path;

在我们的主视图中，我们有 -

<div ui-view="{{myView}}"></div>

为了完成她，我们回到我们的应用程序.run fn，如果toParams和fromParams不同，则在$ stateChangeSuccess上重新加载状态 -

$rootScope.$on('$stateChangeSuccess',
        function(event, toState, toParams, fromState, fromParams){
            if(fromParams !== toParams){
                $state.reload();
                console.log("%c $state reloaded", "background:#aaa; color:#444")
            }
        }
    );

所以给定我们的/ settings设置？access_level = admin＆amp; preferences = shop我们得到myView will = admin@ecoApp.nav.not.tools.settings并且可以使用switch / ifs更改新的参数。

Angular JS w / ui.router - 用无序的gobbed url填充多个状态视图？

1 个答案: