加载视图以查看问题 - AngularJS + ui.router

Loading view to view problems - AngularJS + ui.router

本文关键字:AngularJS ui router 问题 视图 加载      更新时间:2023-09-26

从另一个视图加载视图时出现问题(视图到视图)

问题:目标视图未接收正确的数据来确定要显示的内容。

注意:使用 ui.router

指数:

    <section ng-if="page.header" ng-class="{'transparent-header': page.transparentHeader}" user-header></section>
   <section ng-class="{'transparent-header': page.transparentHeader, 'create-event-back': page.background}" class="sec-full" ui-view></section>
   <section ng-if="page.footer" user-footer></section>

路由器:

.state('LoginPage', {
        url: "/login/",
        data: {
            name: "Login",
            header: false,
            footer: false,
            css: false,
            transparentHeader: false
        },
        templateUrl: "app/partials/common/loginPage.html",
        controller: "loginController"
    })

直接导航到视图时。一切都加载正常,但是当我从另一个视图导航时,例如:主视图>>>>用户视图,保存导航栏的<section>不会被评估(ng-if)。

我不明白为什么。

更新我发现了问题。正在发生的事情是:当我导航到受限制的页面时,它会被重定向到登录页面。但是$state是从受限页面获取数据。

这是我在日志中得到的:

洛伊金页面声明:

Object {name: "Login", header: false, footer: false, css: false, transparentHeader: false}

受限页面状态:

Object {name: "Your Profile", header: true, footer: false, css: true, transparentHeader: true…}

控制器

.controller('appController', ['$scope','$state','$rootScope', function($scope,$state,$rootScope){
    //Control header and footer views getting data from router
    $rootScope.$on('$stateChangeStart', function(event, toState){ 
        $scope.page = toState.data;
    })
}]);

现在我的问题是如何防止这种情况?

您正在正确传递数据,但您可能没有正确访问它!在文档中,该示例指出,为了访问数据,您必须使用类似..

$state.current.data.transparentHeader

为此,请确保将$state对象也注入控制器。

请参阅"将自定义数据附加到状态对象"一节https://github.com/angular-ui/ui-router/wiki