Javascript 无法使用ng show更改登录按钮的名称_Javascript_Angularjs

Javascript 无法使用ng show更改登录按钮的名称

javascript angularjs

Javascript 无法使用ng show更改登录按钮的名称,javascript,angularjs,Javascript,Angularjs,在用户登录后，我将布尔值设置为true，并希望将登录按钮状态更新为注销。我尝试使用ng show，但显然它不起作用国家： myApp.config(function ($stateProvider, $urlRouterProvider) { // default route $urlRouterProvider.otherwise("/Home"); var header = { templateUrl: 'commonViews/Header.ht

在用户登录后，我将布尔值设置为true，并希望将登录按钮状态更新为注销。我尝试使用ng show，但显然它不起作用

国家：

myApp.config(function ($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.otherwise("/Home");
    var header = {
        templateUrl: 'commonViews/Header.html',
        controller: function ($scope) {
        }

    };
    var footer = {
        templateUrl: 'commonViews/Footer.html',
        controller: function ($scope) {
        }
    };
    // ui router states
$stateProvider
    .state('Home', {
        url: "/Home",
        views: {
            header: header,
            content: {
                templateUrl: 'views/HomePage.html',
                controller: function ($scope) {
                }
            },
            footer: footer
        }
    })
    .state('LoggedIn', {
        url: "/LoggedIn",
        views: {
            'header': header,
            'content': {
                templateUrl: 'views/LoggedIn.html',
                controller: function ($scope) {
                }
            },
            'footer': footer
        }
    });
});

用户服务：

myApp.factory('UserService', function ($http, $localStorage, AuthenticationService) {
    return {
        logIn: function (email, password) {
            return $http.post('rs/loginResource/login', {email: email, password: password})
                    .then(function (data) {
                        AuthenticationService.isLogged = true;
                        alert("Authentication loggedIn inside login controller: " + AuthenticationService.isLogged);
                        return data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
        },
        logOut: function () {
            if (AuthenticationService.isLogged) {
                AuthenticationService.isLogged = false;
                delete $localStorage.token;
            }
        }
    };
});

myApp.factory('AuthenticationService', function () {
    var auth = {
        isLogged: false
    };
    return auth;
});

登录控制器：

myApp.controller('loginController', ['$scope', '$http', 'jwtHelper', '$localStorage', '$sessionStorage', '$state', '$window', 'UserService', 'AuthenticationService', function ($scope, $http, jwtHelper, $localStorage, $sessionStorage, $state, $window, UserService, AuthenticationService)
    {
        $scope.token = "";
        $scope.$storage = $localStorage;
        $scope.loginForm = function (email, password) {

            if (email !== undefined && password !== undefined) {
                UserService.logIn(email, password).then(function (response) {
                    $localStorage.token = response.data.token;
                    if ($localStorage.token) {
                        $state.go('LoggedIn');
                        alert("scope loggedIn inside login controller: " + AuthenticationService.isLogged);
                    }
                }).catch(function (status, data) {
                    console.log(status);
                    console.log(data);
                });
            }

            $scope.logout = function logout() {
                UserService.logOut().success(function () {
                    $state.go('/');
                }).error(function (status, data) {
                    console.log(status);
                    console.log(data);
                });
            };
        };
    }]);

myApp.config(function ($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.otherwise("/Home");
    var header = {
        templateUrl: 'commonViews/Header.html',
        controller: function ($scope, AuthenticationService) {
            $scope.isLoggedIn = function() {
                 return AuthenticationService.isLogged;
            });
        }

    };
    var footer = {
        templateUrl: 'commonViews/Footer.html',
        controller: function ($scope) {
        }
    };
    // ui router states

index.html：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <head></head>
    <body>
        <div ui-view="header"></div>
        <div ui-view="content"></div>
        <div ui-view="footer"></div>
    </body>
</html>

标题html:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" ng-show="isLoggedIn" ng-click="logout()"><b>Logout</b></a>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" ng-show="!isLoggedIn"><b>Login</b> <span class="caret"></span></a>
                    <ul id="login-dp" class="dropdown-menu">
                        <!---------------------------------Login Controller Here------------------------------------->
                        <li>
                            <div class="row"> 
                                <div class="col-md-12">
                                    <form class="form" role="form" method="post" ng-controller="loginController" ng-submit="loginForm(email, password)" accept-charset="UTF-8" id="login-nav">
                                        <div class="form-group">
                                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                            <input type="email" class="form-control" ng-model="email" id="exampleInputEmail2" placeholder="Email address" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="exampleInputPassword2">Password</label>
                                            <input type="password" class="form-control" id="exampleInputPassword2" ng-model="password" placeholder="Password" required>
                                            <div class="help-block text-right"><a href="">Forget the password ?</a></div>
                                        </div>
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>






电子邮件地址
密码
登录

用户登录后，它会在瞬间将状态更改为注销，然后再次返回登录状态。我不确定出了什么问题？

将

AuthenticationService

添加到控制器的范围中

$scope.AuthenticationService = AuthenticationService;

并从视图/模板中删除

$scope

<ul class="nav navbar-nav navbar-right" ng-controller="loginController">
<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" ng-show="AuthenticationService.isLogged" ng-click="logout()"><b>Logout</b></a>
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" ng-show="!AuthenticationService.isLogged"><b>Login</b> <span class="caret"></span></a>
</li>

您的代码中有两个问题

AuthenticationService.isloged

在成功使用UserService登录后不会更新

模板中不需要有

$scope

，因为在HTML模板中传递的任何角度表达式都将根据当前范围解析

我建议不要在视图层上公开您的服务。只需在您的作用域中添加一个属性

isLoggedIn

，它将决定是否显示登录或注销按钮

myApp.controller('loginController', ['$scope', '$http', 'jwtHelper', '$localStorage', '$sessionStorage', '$state', '$window', 'UserService', 'AuthenticationService', function ($scope, $http, jwtHelper, $localStorage, $sessionStorage, $state, $window, UserService, AuthenticationService)
    {
        $scope.token = "";
        $scope.$storage = $localStorage;
        // new property to hold login status
        $scope.isLoggedIn = false;
        $scope.loginForm = function (email, password) {

            if (email !== undefined && password !== undefined) {
                UserService.logIn(email, password).then(function (response) {
                    $localStorage.token = response.data.token;
                    if ($localStorage.token) {
                        // cache the login status for use in other controllers
                        AuthenticationService.isLogged = true;

                        // update the scope for use in templates
                        $scope.isLoggedIn = true;
                        $state.go('LoggedIn');
                    }
                }).catch(function (status, data) {
                    console.log(status);
                    console.log(data);
                });
            }

            $scope.logout = function logout() {
                UserService.logOut().success(function () {
                   // cache the login status for use in other controllers
                    AuthenticationService.isLogged = false;

                   // update scope for use in templates
                    $scope.isLoggedIn = false;

                    $state.go('/');
                }).error(function (status, data) {
                    console.log(status);
                    console.log(data);
                });
            };
        };
    }]);

这样，在模板中，您只需检查

isLoggedIn

，如下所示

<ul class="nav navbar-nav navbar-right" ng-controller="loginController">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" 
                    data-toggle="dropdown" 
                    ng-show="isLoggedIn" 
                    ng-click="logout()">
          <b>Logout</b></a>
        <a href="#" class="dropdown-toggle"
                    data-toggle="dropdown" 
                    ng-show="!isLoggedIn">
          <b>Login</b> <span class="caret"></span>
        </a>
    </li>
</ul>

在标头控制器中放置一个

isLoggedIn（）

函数：

myApp.controller('loginController', ['$scope', '$http', 'jwtHelper', '$localStorage', '$sessionStorage', '$state', '$window', 'UserService', 'AuthenticationService', function ($scope, $http, jwtHelper, $localStorage, $sessionStorage, $state, $window, UserService, AuthenticationService)
    {
        $scope.token = "";
        $scope.$storage = $localStorage;
        $scope.loginForm = function (email, password) {

            if (email !== undefined && password !== undefined) {
                UserService.logIn(email, password).then(function (response) {
                    $localStorage.token = response.data.token;
                    if ($localStorage.token) {
                        $state.go('LoggedIn');
                        alert("scope loggedIn inside login controller: " + AuthenticationService.isLogged);
                    }
                }).catch(function (status, data) {
                    console.log(status);
                    console.log(data);
                });
            }

            $scope.logout = function logout() {
                UserService.logOut().success(function () {
                    $state.go('/');
                }).error(function (status, data) {
                    console.log(status);
                    console.log(data);
                });
            };
        };
    }]);

myApp.config(function ($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.otherwise("/Home");
    var header = {
        templateUrl: 'commonViews/Header.html',
        controller: function ($scope, AuthenticationService) {
            $scope.isLoggedIn = function() {
                 return AuthenticationService.isLogged;
            });
        }

    };
    var footer = {
        templateUrl: 'commonViews/Footer.html',
        controller: function ($scope) {
        }
    };
    // ui router states

在标题HTML中使用该函数：

 <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
    ng-show="isLoggedIn()" ng-click="logout()"><b>Logout</b>
 </a>
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
    ng-show="!isLoggedIn()">
    <b>Login</b> <span class="caret"></span>
 </a>

更新

登录控制器的作用域是标头控制器作用域的子项。您的

ng show

指令不在登录控制器的范围内。通过将查询

AuthenticationService.isLogged

状态的函数置于正确的范围内，

ng show

指令应能正常工作。

不起作用。将AuthenticationService添加到范围将如何解决我的问题。我想使用

$scope.AuthenticationService.isloged也一样。您有两个问题。一个是不能在模板中使用$scope
（例如，你不说ng click=“$scope.logout（）”
…你说ng click=“logout（）”
）。解决第一个问题后，您将遇到的问题是，AuthenticationService
尚未在$scope
上定义，并且在添加它的作用域之前，无法从视图中访问它。我像您所说的那样将AuthenticationService
设置为作用域，但它不起作用。仍然显示登录按钮而不是登录按钮。我在视图中的IsLoged
函数中删除了paren。查看我的更新答案（我刚刚将ng show=“AuthenticationService.isLogged”
更改为ng show=“AuthenticationService.isLogged（）”
）。现在应该可以工作了。isLogged
在我的userService
中不是一个函数，但让我试试看，你是对的。在视图层中公开服务不是一个好的做法。让我试一试，我想问题出在美国。header.html是一个单独的文件，其中有登录/注销按钮。我正在使用ui路由器插入header.html文件，这可能就是问题所在？我认为问题在于，当您进入LoggedIn
状态时，您正在更新header
、footer
和内容。所以你的HTMLs被再次加载，你的控制器被再次初始化，因为作用域上的isLoggedIn
属性被重置了，这正是我猜测状态有问题的地方。如何不重新加载页眉和页脚？并且具有范围值？理想情况下，您的登录表单应该在内容视图而不是标题视图中，并且只更新LoggedIn
状态中的内容视图。我建议您这样做，但有一个解决方法可以使用身份验证服务的缓存值重新填充作用域，为此更新了我的答案我删除了这个答案，因为@Arkantos似乎在帮助您。但既然你坚持在这里，它就是。我想它会解决你的显示/隐藏问题，但登录后登录表单仍会在那里。它可以工作，但有一个问题-当我刷新页面时，按钮会变回登录。这就是我不愿意回答你问题的原因。你的代码有很多问题。您的登录控制器将某些内容放入本地存储，但您的AuthenticationService
未检查本地存储。您可以使用范围变量来更改模板，而不是使用登录状态来更改模板。看起来你拿了两个例子，用一种奇怪的方式把它们混合在一起。你的代码非常脆弱。改变一件事，另一件事就会破裂。Th