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

Question

从另一个视图（视图到视图）加载视图时遇到问题

问题：目标视图没有接收到正确的数据来确定要显示的内容。

注意：使用 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;

    })
}]);

现在我的问题是如何防止这种情况发生？

Answer 1

您正在正确传递数据，但您可能没有正确访问它！ 在文档中，示例说明为了访问数据，您必须使用类似.. 的语法

$state.current.data.transparentHeader

为此，请确保您也将 $state 对象注入到您的控制器中。

请参阅“将自定义数据附加到状态对象”部分 https://github.com/angular-ui/ui-router/wiki