Question

我有几个嵌套视图。 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);
        }
    };
};

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

无法阅读财产＆＃39; top＆＃39;未定义的

我知道这是因为第一个视图还没有加载，但是决心已经解决了。因此，ui-view为＆＃34;两个＆＃34;不存在，因此您无法滚动到它。

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

Answer 1

听起来像刷新时的竞争条件。尝试将该代码置于超时或将其放入映射控制器中。

从文档来看，它看起来并不能保证页面会被渲染，只是状态是活跃的：

https://github.com/angular-ui/ui-router/wiki

Answer 2

当进入这种状态时，听起来像onEnter被称为它应该被调用的东西。如果您想要在加载视图时调用的事件，可以尝试"$viewContentLoaded"。请参阅https://github.com/angular-ui/ui-router/wiki#view-load-events

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

2 个答案: