У меня есть маленькая кнопка переключения, и я сохраняю значение (true или false) в sessionStorage, и при загрузке страницы, если значение существует в sessionStorage, я беру его и показываю кнопку переключения в зависимости от значения, а также в зависимости от этого значенияЯ показываю другой контент на моей странице angularjs.
Проблема в том, что я сохраняю значение в sessionStorage, и при повторном вызове я вызываю это значение, но моя кнопка переключения и мой оператор ng-if не получают этого.Вот мой код ниже.
Вопрос в том, как и почему я не могу получить это в выражении ng-if?(в моей скрипке я использую ng-show, потому что ng-если не работает в этом примере)
рабочая скрипка
var app = angular.module("ap", []);
app.controller("con", function($scope) {
if (sessionStorage.getItem("modePreview")) {
$scope.basicMode = sessionStorage.getItem("modePreview");
} else {
$scope.basicMode = true;
}
$scope.sendModeValueToStorage = function() {
sessionStorage.setItem(
"modePreview",
($scope.basicMode = !$scope.basicMode)
);
};
});
.activeSwitch,
.inactiveSwitch {
font-size: 26px;
cursor: pointer;
}
i.activeSwitch {
color: #e4e4e471;
}
i.inactiveSwitch {
color: #e4e4e471;
}
.fontStyleUserControlPannel {
font-size: 18px;
font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body ng-app="ap" ng-controller="con">
Advanced mode <i class="fa fa-toggle-on fa-2x" ng-click="sendModeValueToStorage()" ng-class="{'fa-rotate-180' : basicMode}"></i> Basic mod
<div ng-show="!basicMode">
<h3>
Basic mode
</h3>
</div>
<div ng-show="basicMode">
<h3>
Advanced mode
</h3>
</div>
</body>