Update $scope after submit in directive

[vampire1306]

I want to hide the link Login in menu after the user successfully log in. So I user $scope.isLogin and ng-hide to do it. The prolem is I can't change $scope.isLogin in my login directives, so the login link in menu is not hidden. except I press CTRL+F5 to completely reload the page :(

[jadjoubran]

Hi @vampire1306 Can you show us your code for this controller/component?

[vampire1306]

I compress to directives here View of left nav directive:

        class="md-sidenav-left"
        md-component-id="left"
        md-is-locked-open="$mdMedia('gt-md')"
        md-disable-backdrop
        md-whiteframe="4">
    <md-toolbar class="md-theme-indigo">
        <h1 class="md-toolbar-tools">Sidenav Left</h1>
    </md-toolbar>
    <md-content layout-padding>
        <md-button ng-click="vm.close()" class="md-primary" hide-gt-md>
            Close Sidenav Left
        </md-button>
        <md-list flex>
            <md-list-item>
                <a ui-sref="app.landing">Home</a>
            </md-list-item>
            <md-list-item ng-hide="isLogin">
                <a ui-sref="app.login" >Login</a>
            </md-list-item>
            <md-list-item ng-show="isLogin">
                <a ui-sref="app.create-post">Create Post</a>
            </md-list-item>
            <md-list-item ng-show="isLogin">
                <button  ng-click="vm.logout()" >Log out</button>
            </md-list-item>
        </md-list>
    </md-content>
</md-sidenav>

Controller of left nav directive:

class LeftMenuController {
    constructor($mdSidenav, $auth, $scope, $state) {
        'ngInject';
        this.mdSidenav = $mdSidenav;
        this.$auth = $auth;
        this.$state = $state;
        this.$scope = $scope;
        this.$scope.isLogin = this.$auth.isAuthenticated();
    }

}

close()
{
    this.mdSidenav('left').close()
        .then(function () {
            //$log.debug("close LEFT is done");
        });
}

logout()
{
    this.$auth.logout();
    this.$scope.isLogin = this.$auth.isAuthenticated();

    this.$state.go("app.login");
}

}

export const LeftMenuComponent = {
    templateUrl: './views/app/components/left_menu/left_menu.component.html',
    controller: LeftMenuController,
    controllerAs: 'vm',
    scope: {},
    bindings: {}
}

Login directive's controller:

class LoginFormController {
    constructor(API, ToastService, $state, $auth, $scope) {
        'ngInject';

        this.ToastService = ToastService;
        this.state = $state;
        this.$auth = $auth;

        this.$scope = $scope;
        this.$scope.isLogin = this.$auth.isAuthenticated();
    }

    login() {
        var data = {
            email: this.username,
            password: this.pwd
        };

        this.$auth.login(data).then(
            (response) =>{
            this.$scope.isLogin = this.$auth.isAuthenticated();

        this.ToastService.show('Login successfully');

        this.state.go('app.create-post', {});

        });

    }

}

export const LoginFormComponent = {
    templateUrl: './views/app/components/login_form/login_form.component.html',
    controller: LoginFormController,
    controllerAs: 'vm',
    scope: {},
    bindings: {}
}

[jadjoubran]

Hi @vampire1306 Can you please edit your code and use 3 backticks for multiline codes

[vampire1306]

@jadjoubran as you can see, I use this.$scope.isLogin to check if user is logged in to hide the login link and show the logout button in left menu.

[jadsalhani]

Hi @vampire1306

So you have a couple of issues in your code that can be fixed (not sure they'll fix your issue, but better to fix them anyway)

• If you want isLogin to be a variable expression, you don't have to use $scope. you can just declare it in the controller using this.isLogin and then use it in the html as vm.isLogin So you'd have to fix that in your controllers and in the html of the sidenav and the login directive
• To propagate data between 2 components/pages/controllers, the best practice is to use a service. So you can create something like

export class LoginService{
    constructor(){
       this.isLoggedIn = false
    }

   setLoggedIn(){
       this.isLoggedIn = true;
   }

   getIsLoggedIn(){
       return this.isLoggedIn;
   }
}

And in your controller you'll have this.$scope.isLogin = LoginService.getIsLoggedIn(); or this.isLogin = LoginService.getIsLoggedIn(); if you fixed it as I said before.

Let me know if this works for you

[vampire1306]

I will make this more clearly. I have two directives: Login_Form and Left_Nav. Login_Form has funtion login. Left_Nav has a list of links, and funtion log out When not login yet, Left_Nav shows the login link, and hides the create_post Links. When user authenticates successfully, Left_Nav hides the login link, show the create_post link and the logout button without having to completely reload page (CTRL+F5). I already use satellizer and can check if authenticated by $auth.isAuthenticated().

Now, after I log in, I have to press CTRL+F5 to reload all page, so the variable isLogin of Left_Nav will update, and hide the login link. I've already tried your code, but I still have to press CTRL+F5 to get what I want.

[vampire1306]

@jadjoubran I find out a way. I change this `

Login

To this

Login

And add this function to Left_Nav: getLoginStatus(){ return this.$auth.isAuthenticated(); } `

[jadsalhani]

@vampire1306 I see what you were trying to do, I misunderstood a bit thinking you only wanted to use the value of isLogin between two components

You can integrate this function in the service I wrote above as well

export class LoginService{
  constructor($auth){
    this.$auth = $auth;
  }
  getIsLoggedIn(){
    return this.$auth.isAuthenticated();
  }
}

Glad it worked out