Question

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

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_token，叠加层自动消失。我尝试使用removeItem删除条目表格chrome的资源部分甚至JS控制台。在这种情况下，叠加层不会自动出现！我是棱角分明的新手，我错过了什么？

Answer 1

你可以尝试这样的事情

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")
}

Answer 2

试试这个

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

将控制器更改为： -

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

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

Answer 3

可以通过向叠加层添加类来尝试针对该问题的不同解决方案。就像是， .show { display: block; } .hide { display: none; } 我有一个jsfiddle。

Answer 4

请尝试以下虚拟代码

<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>

让ng-show / ng-hide与localStorage一起使用是否被Angular之外的外部源修改？

4 个答案: