Angularjs - bind value from directive to ng-show/hide anywhere in document


Tags: javascript,jquery,css,angularjs

Problem :

Firstly,,, I am looking for a solution better/more secure then this one,, but for now this is what works best considering my needs...

Now to the point..

I have a directive I use to authenticate a user.. The idea is that a user can log in on any site page and stay on the page.. and when they log in "admin" components on the page load. Admin componnents are wrapped in belonging divs..

I need a value from the directive to set ng-show to true or false as user logs in and out. Ng-show can be on any/multiple element/s in the page.

Here is my directive

app.directive('login', function($http, $rootScope) {
return {
    restrict: 'E',
    template: "<form>" +
              "<label>Username</label>" +
              "<input type='text' ng-model='username'>" +
              "<label>Password</label>" +
              "<input type='password' ng-model='password'>" +
              "<br>" +
              "<input type='submit'>" +
              "</form>",
    link: function(scope, elem, attrs) {

        elem.bind('submit', function() {

            var user_data = {
                "username": scope.username,
                "password": scope.password,
            };

            $http.post("http://lessons.localhost/auth.php", user_data)
                .success(function(response) {

                            switch (response) {
                            case "success":
                                sessionStorage.userStatus = "success";
                                sessionStorage.frameStatus = "true";
             // I need framestatus to bind to ng-show on any element in the page
                                break;

                            case "failure":
                                sessionStorage.userStatus = "failure";
                                sessionStorage.frameStatus = "false";
                                break;

                             default:
                                sessionStorage.userStatus = "absent";
                                sessionStorage.frameStatus = "false";
                                break;
                            }
                  console.log(sessionStorage.userStatus + sessionStorage.frameStatus);
          });

        });

          console.log(sessionStorage.userStatus + sessionStorage.frameStatus);

     }
 }
 });
  1. Alternatively,, How could I create a directive called xyz that I could apply to any element depending on login status that does not show as css in code inspector? I do need the first problem solved but in reality I would prefer a better method.


Solution :

You can make your directive's scope inherit from where it is used by setting scope:true in your directive. Then update a property on the parent scope or rootScope inside your directive based on success or failure of the login request.

Here is a working plunker

http://plnkr.co/edit/JUato1?p=preview

Please note that, I have set the userLoggedIn to true even in case of error, just to demonstrate.


    CSS Howto..

    How to order a css file?

    How to align a list to an image, and jquery problems

    How to scale SVG properly and responsively in HTML5?

    How to put a space in front of a next line [closed]

    How to re-size constantly changing text to fit in a div with a fixed width, based on the changing of a