¿Hacer que ng-show/ng-hide funcione con localStorage siendo modificado por fuentes externas fuera de Angular?

This is the top level controller for my login overlay. 

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

Here is the corresponding HTML.

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

As soon as after logging in, I set auth_token in localstorage, the overlay automatically disappears. I tried deleting the entry form chrome's resources section and even JS console using removeItem. In that case the overlay doesn't appear automatically! I am new to angular, what am I missing ?

preguntado el 27 de noviembre de 13 a las 06:11

removing the local storage from js console will not work you have to delete from code and then manually call a digest cycle using scope.$apply() -

@Ajaybeniwal: what if a third party, deletes it from my localstorage? I should come to know, right? is $watch a solution? or I have to subscribve inside my controller to localstoarge events using $on and call $apply on scope? Or I am also seeing solutions where ppl use broadcaste.. whats the difference in the three approaches ? -

4 Respuestas

puedes probar algo como esto

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

Respondido el 29 de junio de 17 a las 08:06

Prueba esta

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

And change the controller to :-

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

Also I recommend use of Services or Factories to implement a login authentication module.

respondido 27 nov., 13:07

Would he need to call $scope.apply() to get angular to know? - Fijar

A different solution to the problem can be tried by adding classes to the overlay. Something like, .show { display: block; } .hide { display: none; } Tengo un jsFiddle para ti.

respondido 27 nov., 13:07

Pls try below Dummy Code 

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

respondido 27 nov., 13:07

wont work if external elements modify loclastorage. watch wont be called! - Amogh Talpallikar

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.