CODEWITHSUNDEEP
javascriptcssangularjs
Guyute
Guyute

Reputation: 149

why does Angular ng-cloak override my ng-show even with custom directive

I am trying to hide my layout page while logging in, I have ng-show set to a boolean that when there is a successful log in gets set to true. No matter what I do the layout page will not show its self. I followed the answer from this Angular ng-show directive doesn't work for button but I still don't get the page to show. When I look in the dev tools I can see that my custom style is being applied

Html Code:

<div class="my-hidden-xs container" ng-show="isLoggedIn">

CSS:

.my-hidden-xs {
    display: none !important;
}

Controller:

function LogInController($scope, $http, $state) {
    $scope.isLoggedIn = false;     
    $scope.signOn = function () {
        $http.post('http://localhost:a location on my backend').then(function (response) {
            if (response.data.token) {
                $scope.$apply.isLoggedIn = true;
                $state.go('main'); 
                //...

What am I doing wrong here? I am new to angular but have used hide and show before without this problem.

Upvotes: 1

Views: 540

Answers (5)

Guyute
Guyute

Reputation: 149

I found a work around for this, I made a function in the config that sets the is logged in property so instead of ng-show="isLoggedIn"

I have ng-show="isLoggedIn()"

I then call that function passing true to it when I verify my JWT, its a little bit of a hack but it works and I can keep going, I have a feeling that when I get into the validation of the JWTS on the front end a bit more I will abstract some of this into a service.

Upvotes: 0

Joao Polo
Joao Polo

Reputation: 2163

wait. ng-cloak doesn't overrides your ng-show, what happens is with you define display:none two times, and ng-show doesn't will influence on your class definition.

Only change your DIV line to:

<div class="container" ng-show="isLoggedIn">

and, of course, if your page has a flick, insert an external div with ng-cloak

<div ng-cloak>
    <div class="container" ng-show="isLoggedIn"> 
    ...

Upvotes: 1

Utku Apaydin
Utku Apaydin

Reputation: 162

Can you try to change your css you have display: none !important and i can not see any code that changes it on the success function You can use something like this: 

<div class="container {{checkVisible(isLoggedIn)}}">

in controller

$scope.checkVisible()
{
 if(isLoggedIn)
      return '';
 else
      return 'my-hidden-xs';   
}

Upvotes: 1

dfsq
dfsq

Reputation: 193271

I think you need to change you logic. Don't apply my-hidden-xs class by default, but instead use ngClass directive:

<div class="container" ng-class="{'my-hidden-xs': !isLoggedIn}">

Then when needed you set flag to true:

$scope.isLoggedIn = true;

Upvotes: 1

Rasalom
Rasalom

Reputation: 3111

All directives have it's own executing priorities, I couldn't find details in docs, but you can look into source code to find it, e.g.: https://github.com/angular/angular.js/blob/v1.2.0-rc.2/src/ng/directive/ngRepeat.js#L215

You can set priority of your directive the same way as well.

Upvotes: 0

Related Questions