Question

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

的login.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没有成功

的index.html

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

controller.js

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

Answer 1

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

将控制器属性向上移动到DOM中，使其覆盖表单和按钮，并将注销按钮更新为：

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

然后按钮将仅在共享loginController中$ scope.loggedIn为真时显示。

Answer 2

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

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

您从loginController和index.html（在您的主控制器中）拨打logic.html两次，我认为这不是一个好习惯。

您应该初始化显示登录div（表单）的主控制器以及用户登录后。调用$scope.loginForm()函数，您应该在案例$scope.loggedIn中设置一个标记为true。

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

应该避免在div上调用控制器，就像你正在为需要使用通用范围的任务而做的那样。

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

路由的ui-router代码如下所示。

myApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/state1"); $stateProvider .state('state1', { url: "/state1", templateUrl: "partials/state1.html" }) });
ui-router有很多配置选项可以在docs中查看。同样，您可以在angular docs中查找ng-router代码的代码。

当我点击SignIn按钮时，Angularjs显示注销按钮

2 个答案: