即使在页面刷新或从应用程序注销后也禁用该按钮

Question

我有以下代码，当我刷新应用程序时，按钮处于启用状态。即使在页面刷新或从应用程序注销后，我也希望按钮处于禁用状态。基本上我需要save the state of the button。我该怎么做？

//html
<div>
<input type="file" ng-disabled="false" id="id1">
</div>

//Controller
document.getElementById("id1").disabled = true;

Answer 1

可以使用localStorage保存状态，这是简单的解决方法。

页面刷新和注销的存储值

localStorage.setItem('isPageRefreshed', 'true'); // page refresh

localStorage.setItem('isLoggedOut', 'true'); // on logout

现在您可以添加按钮禁用检查，如下所示：

HTML:

<input type="file" ng-disabled="isDisabled" id="id1">

JavaScript/Controller:

if(localStorage.getItem('isPageRefreshed') === "true") {
  $scope.isDisabled = true;
}

if(localStorage.getItem('isLoggedOut') === "true") {
  $scope.isDisabled = true;
}

任何时候你想启用按钮然后执行此操作$scope.isDisabled = false;

Answer 2

使用ng-disabled的正确方法是通过控制器来控制它。

<div>
<input type="file" ng-disabled="isUserLoggedIn" id="id1">
</div>

Controller

$scope.isUserLoggedIn = this.appService.isUserLoggedIn() || false;
//returns true or false based on if user is logged In

AppService

这可以检查 VicJordan 提到的 localstorage 或您想要和实现的任何逻辑。

即使在页面刷新或从应用程序注销后也禁用该按钮

Disable the button even after page refresh or logout from the application

css

angularjs

angular-cookies