Question

我在我的应用中设置了以下路由：

$stateProvider
    .state('splash',
    {
        url: '/',
        views: {
            'all': {
                templateUrl: 'partials/splash.html'
            }
        }
    })
    .state('home',
    {
        url: '',
        views: {
            'all': {
                templateUrl: 'partials/home.html'
            }
        }
    })
    .state('contents',
    {
        url: '/contents',
        views: {
            'all': {
                templateUrl: 'partials/contents.html'
            }
        }
    })

因此，当应用程序首次加载时，用户会看到启动页面，然后单击加载主页状态的启动模板中的按钮。这允许我有一个没有历史记录或URL的状态，因此用户无法通过浏览器后退按钮返回到启动页面（除非他们刷新页面）。

问题在于，当用户然后导航到内容页面时（再次通过主页上的按钮），这会创建一个历史记录条目并允许用户返回（这很好），但是按下后退按钮需要用户返回启动状态而不是本地状态...

我该怎么办？

Answer 1

由于我没有看到上述状态中声明的控制器，我假设您的模板声明了控制器。所以..你可以通过在变量中保存数据来动态更改templateUrl，这是一个黑客：

var splashVisits = 0;
localStorage.setItem('splashVisit', JSON.stringify(splashVisits )); // save this in a service actually or like so in localStorage when app loads
$stateProvider
    .state('splash',
    {
        url: '/',
        views: {
            'all': {
                // make the template url a function which returns a different template based on number of splash visits.
                templateUrl: function(){
                    // read splashVisits
                    splashVisits = JSON.parse(localStorage.getItem('splashVisits')); // returns some value
                    if(splashVisits == 0){ 
                        splashVisits++;
                        localStorage.setItem('splashVisit', JSON.stringify(splashVisits ));
                        return 'partials/splash.html';
                    }
                    else 
                        return 'partials/home.html';
                }
            }
        }
    })

我自己没有尝试过这个，但我知道templateUrl接受了一个函数。如果你设置了一个有助于测试它的plunker / jsfiddle。

更新

$stateProvider
.state('splash',
{
    url: '/',
    controllerProvider: function($stateParams) {
        var ctrlName = null;
        splashVisits = JSON.parse(localStorage.getItem('splashVisits')); 
        if(splashVisits == 0){ 
            ctrlName = 'HomeCtrl';
        }
        return ctrlName;
    }
    views: {
        'all': {
            templateUrl: function(){
                // read splashVisits
                splashVisits = JSON.parse(localStorage.getItem('splashVisits')); // returns some value
                if(splashVisits == 0){ 
                    splashVisits++;
                    localStorage.setItem('splashVisit', JSON.stringify(splashVisits ));
                    return 'partials/splash.html';
                }
                else {
                    // force state change?
                    return 'partials/home.html';
                }
            }
        }
    }
})
.state('home', 
{ 
    url: '', 
    controller: 'HomeCtrl', 
    views: { 
        'all': { 
            templateUrl: 'partials/home.html' 
        } 
    } 
})
.state('contents',
{
    url: '/contents',
    views: {
        'all': {
            templateUrl: 'partials/contents.html'
        }
    }
})

Answer 2

基于@SoluableNonagon的回答

此代码解决了问题：

var splashVisits = 0;
localStorage.setItem('splashVisits', JSON.stringify(splashVisits));

$stateProvider
    .state('splash',
    {
        url: '/',
        views: {
            'all': {
                templateUrl: function(){

                    splashVisits = JSON.parse(localStorage.getItem('splashVisits'));

                    if(splashVisits > 0) {
                        return 'partials/home.html';
                    }
                    else {
                        splashVisits++;
                        localStorage.setItem('splashVisits', JSON.stringify(splashVisits));
                        return 'partials/splash.html';
                    }
                }
            }
        }
    })
    .state('home',
    {
        url: '',
        views: {
            'all': {
                templateUrl: 'partials/home.html'
            }
        }
    })

AngularJS中相同URL的两个状态

2 个答案: