Question

我有两个按钮（登录和注销）：

<button type="submit" class="btn btn-info btn-sm" ng-controller="signinController" ng-click="go()"> Sign in</button>

<button type="submit" class="btn btn-danger btn-sm"  ng-controller="signinController"   ng-click="goOut()">Sign out</button>

当我进行身份验证（使用signinController）时，我想访问每个按钮并选择（视情况而定）隐藏。有可能吗？

SignController

controller('signinController', function($scope, $location, $http, $window, AuthService) {
  $scope.signinForm = function() { 
      // access and hide login button
  }

$scope.go = function() {   
    $location.path("/signin");
};

$scope.goOut = function() {   

};

});

任何人都可以帮助我？

Answer 1

是的，这是可能的，并且有许多不同的方法可以做到这一点。可能最简单，最直观的方法是使用ng-show指令，如下所示：

<div ng-controller="signinController">
  <button ng-click="signIn()", ng-show="!loggedIn"> Sign in </button>
  <button ng-click="signOut()", ng-show="loggedIn"> Sign out </button>
</div>

使用以下控制器代码

controller('signinController', function ($scope, $http) {

  $scope.signIn = function () {
    // for example:
    $http.post('login', {username: $scope.username, password: $scope.password})
    .then( function () {
      $scope.loggedIn = true;
    });
  }

  $scope.signOut = function () {
    $http.get('logout')
    .then( function () { 
      $scope.loggedIn = false;
    });
  }

});

此指令的作用主要是监控loggedIn上的$scope字段，然后在更改时显示或隐藏相关按钮。显然，您需要使用自己的逻辑来执行登录和注销功能，但重要的是在$scope.loggedIn成功时设置它的值。

根据您的问题的标题，特别是（通过ID）部分，您看起来像是来自jQuery背景。 This问题有一些很好的答案 - 我强烈建议您阅读。

AngularJs按ID隐藏按钮

1 个答案: