Question

我正在构建一个电话目录应用程序，我在这里创建了一个登录系统。用户成功登录后，登录按钮将隐藏。也许我是以错误的方式做到这一点。

//html code is
 <ul class="nav navbar-nav pull-right" ng-controller="chklogin as a" ng-switch on="a.logedin" >
        <li class="active"><a href="#/Home">Home</a></li>
         <li ng-switch-default><a href="#/login" >Login {{a.logedin;}}</a></li>

         <li ng-switch-when="true"><a href="#/Dashboard">Dashboard</a></li>
         <li ng-switch-when="true"><a href="#" ng-click="a.logout();">Logout</a></li>
        </ul>

//controller
myApp.controller("chklogin", function() {
this.logedin='false';
        $.ajax({
        url: "process/chklogin.php",
        type: "post"
        }).done(function(res) {

            if (res == 'true') {

            return this.logedin='true';
            }
            else
            {

        return this.logedin='false';
            }
        });

        this.logout= function(){
            $.ajax({
        url: "process/logout.php",
        type: "post"
        }).done(function(res) {

            window.location="#/login";
        });
        }
});

现在告诉我，我做错了什么，我该怎么办？
我应该从中学到什么以及在哪里可以找到它？
告诉我控制器在登录或注销时如何更新视图。

Answer 1

正如其中一条评论所述，基本ng-show或ng-hide可以解决问题。但是，您需要对AngularJs的工作方式有一个坚实的把握和坚实的基础，以便拥有正确的登录和注销页面，具有正确的功能以及正确的UI逻辑演示。

我的建议是在AngularJs中使用service或factory来减少代码库并简化登录过程。有时您需要保留一些用户信息，服务或工厂对于这种情况真的很方便。

在给您一个解决方案之前，让我先对您的代码发表评论，并回答所述的三个问题。

在使用AngularJs时摆脱jquery心态

这是您第一次开始学习AngularJs时最重要的部分之一。与上面的代码示例一样，请使用$http个请求，而不要使用$.ajax。
您需要了解AngularJs的生命周期。部件

了解$scope的生命周期是什么，即应用程序控制器和视图之间的粘合应该基本上回答你的问题。以下是一些很好的资源：Angular scopes，Lifcycle of controller

阅读Angular的工厂和服务

如上所述，工厂和服务是减少代码库的好工具。如果您要求学习AngularJs的资源，那么其中一个好网站实际上就是Angular site本身。

所以这是我为你创建的非常simple plnkr，希望它能够为你提供一些基本的见解。但有几点需要注意：

我使用ui.router进行路由。也许这里有偏见，但它太棒了。如果你在plnkr中感到困惑，那就认为这只是ngRoute做他的工作。

plnkr中的代码显然是出于说明目的，不能用于实际工作中。实际应用可能更复杂。我甚至没有在plnkr中编写登录逻辑。但我发现你有能力做到这一点，因为你确实在控制器中写了一些内容。

结论/ tldr：能够发挥作用的代码的主要要点是

<div ng-show='isLoggedIn'>  </div>

其中isLoggedIn应该是基于某些登录逻辑评估的表达式;当然，使用ng-hide来做其他事情。

如何使用控制器显示和隐藏登录链接？

1 个答案: