Question

我正在使用AngularJS，我需要您的帮助才能在用户登录后更新HTML的内容。事实上，当我加载页面时，HTML只加载一次控制器，这意味着当用户尚未登录时。但登录后HTML没有刷新页面显示用户的登录信息？我该如何解决这个问题。下面是我的HTML

$(".code").click(function()
{
    $("#CodeModal").modal('show')
});

和我的控制员：

<section class="hero hero-1 hero-small" ng-controller="HomeController">

    <header class="navbar" role="navigation">
        <div class="container" ng-controller="UserController">
            {{username}}
            <nav>
                <a class="navbar--logo" ui-sref="home">EspritAcademy</a>
            </nav>
            <nav>
                <ul class="navbar--list pull-right">
                    <li class="navbar--list-item"><a ui-sref="#">Features</a></li>
                    <li class="navbar--list-item"><a ui-sref="#">Courses</a></li>
                    <li class="navbar--list-item" ng-hide="isLoggedIn()"><a
                        ui-sref="login">Sign in</a></li>

                    <li class="navbar--list-item dropdown"
                        ng-controller="DropdownCtrl" dropdown is-open="status.isopen"
                        ng-show="isLoggedIn()"><a ui-sref="#"
                        class="dropdown-toggle" data-toggle="dropdown" dropdown-toggle
                        ng-disabled="disabled"> <b>{{username}}</b><b class="caret"></b>
                    </a>
                        <ul class="dropdown-menu" style="left: inherit; right: 0;">
                            <li><a ui-sref="#">My Profile</a></li>
                            <li><a ui-sref="#">Account Settings</a></li>
                            <li ng-click="logout()"><a ui-sref="home">Logout</a></li>
                        </ul></li>
                    <!-- <li class="navbar--list-item" ng-click="logout()"
                        ng-show="isLoggedIn()"><a ui-sref="home">Déconnexion</a></li> -->

                    <li class="navbar--list-item" ng-hide="isLoggedIn()"><a
                        class="rounded-button blue-button" ui-sref="register">Start
                            learning</a></li>
                </ul>
            </nav>
        </div>
    </header>
</section>

我面临的问题是显示{{username}}。以下是使用Java后端使用rest技术获取用户详细信息的工厂。

controller(
            "HomeController",
            function HomeController($scope, sessionService) {
                $scope.isLoggedIn = sessionService.isLoggedIn;
                $scope.logout = sessionService.logout;
            }).controller(
                    "UserController",
                    function UserController($scope, accountService) {
                        console.log("Hello");
                        var loggedUser = {};
                        loggedUser = accountService.getuser();
                        if ((loggedUser)) {
                            $scope.username = loggedUser.username;
                            console.log("username : ", $scope.username);
                        }
                    }).controller('DropdownCtrl',
            function($scope, $log) {
                $scope.status = {
                    isopen : false
                };

                $scope.toggled = function(open) {
                };
            });

我不需要继续刷新我的页面我只需要在用户登录后加载UserController。是否可以使用ng-if或其他方式？

Answer 1

由于*{ box-sizing:border-box; -moz-box-sizing:border-box; } .left{ float:left; width:10%; height:100px; border:1px solid #000; } .right{ float:left; width:89%; margin-left:1%; } .right div{ float:left; width:33%; border:1px solid #000; } .right div:nth-child(2){ text-align:center; } .right div:nth-child(3){ text-align:right; } .right div:nth-child(4),.right div:nth-child(5){ width:99%; border:0; } .right div:nth-child(4) textarea{ width:100%; height:100px; margin:10px 0; } .right div:nth-child(5){ text-align:right; }始终返回一个对象，请尝试以下

getuser()

然后在标记中使用

 function HomeController($scope, accountService) {
     //will always be object but may not have `username` property
     $scope.loggedUser = accountService.getuser();
 }

所以现在当{{loggedUser.username}}属性在您的服务中更新时，它将一直绑定到视图

Answer 2

我认为只有在用户登录时才必须实例化用户控制器，目前情况并非如此。

尝试更改此

<div class="container" ng-controller="UserController">

到这个

<div class="container" ng-controller="UserController" ng-if="isLoggedIn()">

在angularjs中绑定没有刷新

2 个答案: