javascript - Angularjs 根据存储在 session 存储中并存储在 $scope 中的变量动态显示/隐藏元素

Question

我一直在搜索很多，但找不到在不刷新页面的情况下显示/隐藏元素的解决方案。这是我想要完成的任务的简化版本:

HTML:

<input ng-show="user == null" type="text" placeholder="username" ng-model="username" />
<button ng-show="user == null" ng-click="login()">Add User</button>
<div ng-show="user != null"> should show when user is defined </div>

Controller :

 $scope.login = function () {
   sessionStorage.setItem('username', $scope.username);
   $scope.user = sessionStorage.getItem('username');
 };

我能够成功获取存储在 session 存储中的用户名，但在变量存储在 sessionStorage 和 $scope.user 中后，我无法让输入消失并且 div 动态显示。

如果我登录后刷新页面，显示和隐藏就会起作用。

另一种方法是显示/隐藏登录功能中的元素，但我也不知道如何做到这一点。

有没有办法让它们动态显示/隐藏？

Answer 1

提供的代码没有任何问题。这是一个完美运行的示例，我唯一删除的是对 sessionStorage 的访问，因为出于安全原因不允许在沙箱模式下使用它。

确保您已分别声明 ng-app 和 ng-controller 指令

var app = angular.module("myApp", []);
app.controller("myController", ["$scope",
  function($scope) {
    $scope.login = function() {
      $scope.user = $scope.username;
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <input ng-show="user == null" type="text" placeholder="username" ng-model="username" />
  <button ng-show="user == null" ng-click="login()">Add User</button>
  <div ng-show="user != null">should show when user is defined</div>
</div>