Angularjs 显示注销按钮，当我单击登录按钮时

Question

我有一个特定部分的登录表单（显示在主页的正文中）。

登录.html

 <form   name="loginForm" class="form-horizontal" ng-controller="loginController" ng-submit="submit()" novalidate>  
     <div  class="input-group" >                              
        <input type="text" class="form-control" name="username" ng-model="username"  >
    </div>             
    <div  class="input-group" >
     <input type="password" class="form-control" name="password" ng-model="password" >
     </div>
    <div style="margin-top:10px" class="form-group">
         <!-- Button -->
         <div class="col-sm-12 controls">
            <button  type="submit" class="btn btn-info"><i class="icon-hand-right"></i>Log In</button> 
         </div>
     </div>          
</form>     

因此，当我单击"登录"按钮时，我需要显示一个注销按钮。 这与菜单一起位于主页上。

我如何获得它？我尝试使用ng-show但没有成功

索引.html

<button type="submit"  ng-show="showBtn"  ng-controller="loginController"   ng-click="logOut()">Sign out</button>

控制器.js

controller('logincontroller', function($scope) {
   $scope.showBtn= false;
   $scope.loginForm = function() { 
     $scope.showBtn= true;
  }
}).

Answer 1

每次使用 'ng-controller' 属性时，它都会创建控制器的新实例，因此您的登录表单不会与注销按钮共享相同的范围。

将控制器属性在 DOM 中向上移动，使其覆盖窗体和按钮，并将注销按钮的 ng-show 更新为：

<button type="submit"  ng-show="loggedIn"  ng-controller="loginController" ng-click="logOut()">Sign out</button>

则该按钮仅在共享登录控制器中的 $scope.loggedIn 为 true 时显示。

Answer 2

我建议你应该有一个基本控制器，例如dashboardCtrl或mainAppCtrl应用程序配置阶段后加载的第一个控制器。

这个单一控制器应该处理您的登录和注销代码的所有逻辑。

您从index.html和logic.html（在您的主控制器中）调用loginController两次，在我看来这不是一个好的做法。

您应该初始化显示登录div（form） 的主控制器，并在用户登录后。调用$scope.loginForm()函数，您应该在大小写的情况下设置一个标志$scope.loggedIn true。

由于这是一个单一控制器，因此您有一个通用$scope它与视图和控制器中的值绑定，因此使用ng-show应该有效。

应避免像对需要使用公共作用域的任务那样在div 上调用控制器。

编辑：-您可以在配置时使用ng-route或ui-router（更好的）提供程序来创建处理路由任务的路由。

使用 ui 路由器路由代码如下所示。

myApp.config(function($stateProvider, $urlRouterProvider) {
   $urlRouterProvider.otherwise("/state1");
   $stateProvider
     .state('state1', {
         url: "/state1",
         templateUrl: "partials/state1.html"
     })
});

UI路由器有许多配置选项，可以在文档中查看。同样，您可以在 angular 文档中查找 ng-router 代码的代码。