Angularjs 根据存储在会话存储中并存储在 $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>

控制器：

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

我能够成功获取存储在会话存储中的用户名，但是在变量存储在 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>