Javascript 让ng show/ng hide在本地存储被外部源修改的情况下工作？_Javascript_Angularjs

Javascript 让ng show/ng hide在本地存储被外部源修改的情况下工作？

javascript angularjs

Javascript 让ng show/ng hide在本地存储被外部源修改的情况下工作？,javascript,angularjs,Javascript,Angularjs,这是我的登录覆盖的顶级控制器 login.controller('main_controller', ['$scope', function ($scope) { $scope.shouldShowLoginOverlay = function () { return (null == localStorage.getItem("auth_token")); } }]); 下面是相应的HTML <div ng-controller = "main_cont

这是我的登录覆盖的顶级控制器

login.controller('main_controller', ['$scope', function ($scope) {
    $scope.shouldShowLoginOverlay = function () {
        return (null == localStorage.getItem("auth_token"));
    }
}]);

下面是相应的HTML

<div ng-controller = "main_controller" ng-show="shouldShowLoginOverlay()"></div>

登录后，我在localstorage中设置了auth_令牌，覆盖就会自动消失。我试着用removeItem删除chrome的参考资料部分甚至JS控制台的条目。在这种情况下，覆盖不会自动显示！我是新来的，我错过了什么

试试这个

并将控制器更改为：-

login.controller('main_controller', ['$scope', function ($scope) {
    $scope.shouldShowLoginOverlay = function () {
      $scope.isAuthenticated  = (null == localStorage.getItem("auth_token"));
      return $scope.isAuthenticated;
    }
}]);

我还建议使用服务或工厂来实现登录身份验证模块。

可以通过向覆盖添加类来尝试解决该问题的不同解决方案。大概，

.show{
显示：块；
}
.隐藏{
显示：无；
}

我有一个虚拟代码给你。

请尝试下面的虚拟代码

<body ng-controller="test">
    <div ng-show="istrue">fadf</div>
    <input type="button" ng-click="addItem()" value="add" />
    <input type="button" ng-click="removeItem()" value="Remove" />
    <script>
        var myApp = angular.module("MyApp", ["ngAnimate"]);
        myApp.controller('test', function ($scope) {
            alert(localStorage.getItem("auth_token"));
            $scope.$watch(function () {
                return (null != localStorage.getItem("auth_token"));
            }, function (newvalue, oldvalue) {
                $scope.istrue=newvalue
            });

            $scope.addItem = function () {
                var testObject = { 'one': 1, 'two': 2, 'three': 3 };
                localStorage.setItem('auth_token', JSON.stringify(testObject));
            }
            $scope.removeItem = function () {
                localStorage.removeItem('auth_token');
            }

        });


    </script>
</body>


fadf
var myApp=angular.module（“myApp”，“ngAnimate”）；
myApp.controller（'test'，函数（$scope）{
警报（localStorage.getItem（“auth_令牌”）；
$scope.$watch（函数（）{
返回（null！=localStorage.getItem（“auth_令牌”）；
}，函数（新值，旧值）{
$scope.istrue=newvalue
});
$scope.addItem=函数（）{
var testObject={'one'：1，'two'：2，'twree'：3}；
setItem（'auth_token'，JSON.stringify（testObject））；
}
$scope.removietem=函数（）{
localStorage.removietem（'auth_token'）；
}
});

您可以尝试类似的方法

view.html

<p align="center" ng-show="yourFunction() == true">will show when you had something valued as True on local storage</p>



controller.js

$scope.yourFunction = function() {
  return localStorage.getItem("your_local_storage")
}

view.html
将显示本地存储上的值为true的内容
controller.js
$scope.yourFunction=function（）{
返回localStorage.getItem（“您的本地存储”）
}

他需要调用$scope.apply（）才能知道吗？从js控制台中删除本地存储将不起作用。您必须从代码中删除，然后使用scope手动调用摘要循环。$apply（）@Ajaybeniwal:如果第三方从我的本地存储中删除它，会怎么样？我应该知道的，对吧？美元手表是解决方案吗？或者我必须在控制器内使用$on和调用$apply on作用域订阅localstoarge事件？或者我也看到了ppl使用广播的解决方案。。这三种方法的区别是什么？如果外部元素修改了LocalStorage，则这三种方法不起作用。手表不叫！