angularjs - AngularJs ui-router onEnter 在视图加载之前触发

问题描述

我有几个嵌套视图。Html如下。对于索引页面：

<section ui-view id="one"></section>

然后我有第二个嵌套视图，如下所示：

<!--- Removed for brevity --->

<section ui-view="two" id="two"></section>

最后我有另一个嵌套视图，如下所示：

<!--- Removed for brevity --->

<section ui-view="three" id="three"></section>

所以，路线；它们看起来像这样：

$stateProvider
    .state('home.one', configureOneRoute());

function configureOneRoute() {
    return {
        url: ':categoryName/one',
        views: {
            '@': {
                templateUrl: 'scripts/one/one.html',
                controller: 'StepOneController',
                controllerAs: 'controller'
            }
        },
        params: {
            clear: false
        },
        resolve: {
            options: getOptions,
            category: getCategory,
            criteria: getCriteria,
            groups: getGroups,
            priorityColours: getPriorityColours,
            products: getProducts,
            questions: getQuestions,
            settings: getSettings,
            createSession: createSession,
            applyQuestions: applyQuestions,
            updateSession: updateSession
        },
        data: {
            pageTitle: 'Step one'
        },
        onEnter: function (products) {            
            console.log(products);      
            $('html, body').animate({
                scrollTop: $('#two').offset().top
            }, 2000);
        }
    };
};

然后我有我的第二条路线：

$stateProvider
    .state('home.one.two', configureTwoRoute());

function configureTwoRoute() {
    return {
        url: '/two',
        views: {
            'two': {
                templateUrl: 'scripts/two/two.html',
                controller: 'StepTwoController',
                controllerAs: 'controller'
            }
        },
        resolve: {
            updateSession: updateSession
        },
        data: {
            requireLogin: true,
            pageTitle: 'Step two'
        },
        onEnter: function (products) {            
            console.log(products);      
            $('html, body').animate({
                scrollTop: $('#two').offset().top
            }, 2000);
        }
    };
};

最后是我的第三个观点：

$stateProvider
    .state('home.one.two.three', configureThreeRoute());

function configureThreeRoute() {
    return {
        url: '/three',
        views: {
            'three': {
                templateUrl: 'scripts/three/three.html',
                controller: 'StepThreeController',
                controllerAs: 'controller'
            }
        },
        resolve: {
            updateSession: updateSession
        },
        data: {
            requireLogin: true,
            pageTitle: 'Step three'
        },
        onEnter: function (products) {            
            console.log(products);      
            $('html, body').animate({
                scrollTop: $('#three').offset().top
            }, 2000);
        }
    };
};

如果我导航到每个视图，它工作正常。但如果我在第二步并刷新页面，我会收到此错误：

无法读取未定义的属性“顶部”

我知道这是因为第一个视图还没有加载，但决心已经加载。因此，ui-viewfor“two”不存在，因此您无法滚动到它。

有没有办法解决这个问题？

标签： angularjsangular-ui-router

angularjs - AngularJs ui-router onEnter 在视图加载之前触发

问题描述

解决方案

推荐阅读