Question

我正在尝试在我的项目中使用AngularJS + ui-router，它正在工作，但我正处于这种情况的中间......

我有一个带状态/的HOME状态，该状态需要执行以下操作：

当用户未登录时，我想显示一个包含登录表单和一些不同index.html的完整页面，因为我不需要一些列和内容。

当用户登录时，应该使用默认的index.html，这样我就可以在用户登录时使用我的ui-view网格系统以及所有很酷的东西（导航栏，搜索表单等等）在index.html中，因为它们必须显示在每个页面中。）

为了检查用户是否已登录，我有一个工厂AuthFactory.isUserLogged()

这就是我所做的，但不完全是我想要的......

index.html

<div ng-cloak="" ng-if="$root.globals.currentUser">
    <div class="ui fixed inverted menu">
        <div class="ui container">
            <a class="header item" href=""><img class="logo" src="">Dashboard</a>
            <a class="item">Link</a>
            <div class="right menu">
                <div class="ui dropdown icon item">
                    {{ $root.me.username }}
                    <div class="menu">
                        <a href="/settings" class="item">Settings</a>
                        <div class="divider"></div>
                        <a href="/logout" class="item">Logout</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pusher">
        <div class="full height">
            <div class="ui main container" ui-view="mainContainer"></div>
        </div>
    </div>
</div>
<div ng-cloak="" ng-if="!$root.globals.currentUser" ui-view="mainContainer"></div>

正如您所看到的，ui-view="mainContainer"在同一个index.html中被声明了两次，用于记录用户，另一个用于非$root.globals.currentUser

app.js

$stateProvider
        .state('home', {
            url: '/',
            views: {
                'mainContainer': {
                    templateUrl: 'views/main.html',
                    controller: 'HomeCtrl',
                    controllerAs: 'vm'
                }
            }
        })

我知道这不是一个好的解决方案，这就是为什么我要求更好的解决方案......

PS：我使用哪个index.html并不重要，我只是不需要在我的未登录主页中使用整个标记，只需要一个没有导航栏的简单登录表单

编辑：

这不起作用，即使是console.log，它也不会输出任何内容

.state('home', {
            url: '/',
            views: {
                'mainContainer': {
                    templateUrl: function (AuthFactory) {
                        if (AuthFactory.isUserLogged()) {
                            console.log("yep");
                            return 'views/main.html';
                        }

                        console.log("nope");
                        return 'views/login.html';
                    }
                }
            }
        })

Answer 1

为登录和家庭制作两种不同的状态。当用户未登录呼叫登录状态和登录主页后。母版页上只有一个。然后，为了以后在登录后进行转换，您需要在主页html页面上定义另一个。

$stateProvider
                .state('login',
                {
                    url: '/login',
                    templateUrl: "Account/Login.html",
                    controller: 'LoginController'
                })
                .state('home',
                {
                    url: '/home',
                    templateUrl: "Home/Home.html",
                    controller: 'HomeController'
                })

AngularJS根据标准陈述和动态模板

1 个答案: