CODEWITHSUNDEEP
htmlangularjsangularjs-directiveangularjs-scopeangular-ui-router
Karan Kumar
Karan Kumar

Reputation: 2665

AngularJs: set "ng-show" true/false between different controllers

I am quite new to angularjs, The problem I am facing is as follows:

I have a navbar. which is controlled by a controller "navController" and it has links to "#/login" and "#/userregister". My nav bar is static. my ui-view directives are below my nav bar: as shown

<nav ng-controller='navController'>
    <a class="navbar-brand" href="/">First Angular Site</a>
    <a  class='label' href='#/userregister' ng-show="true" >Click Here to Register</a>
    <a   class='label 'href ='#/login' ng-show="true">Click Here To Login</a>
 </nav>

<ui-view>
  
</ui-view>

I want to hide these two links when my state changes i.e when I'm in logged in.

I can't figure how to hide them...as my controllers are different and my nav bar is static.

Possible Brain Storm Solution I thought would work.

1) Use a function in my ng-show="somefunction()" to set it true and false. To share data between controllers I used factory, but since factory is only initiated once. I had to drop this idea.

2) Use Reslove of UI-Router to set a variable True or False. But since my nav bar is not included in the (ui-view) directive. I have to drop this idea.

Is there any more way in which I can do what i want to do. (i.e hide the two links after my state change )

EDIT: 

app.controller ('simpleController',function($scope ,$http, $location, tokenfactory,loginusercheck, usernamefactory){
//various stuff

}

This goes in my ui-view directives.

and this is my navbar Controller.

app.controller ('navController',function($scope,$location,tokenfactory,loginusercheck,usernamefactory ,$window){
  // sign out function defined only here
  }

here is my .config 

app.config (function ($stateProvider,$urlRouterProvider){
    $stateProvider
      .state('hello',
      {
        url: '/userregister',
        templateUrl: 'partials/view.html',
        controller: 'simpleController',
      })
      .state('listview',
        {
            url:'/list',
            templateUrl:'partials/list.html',
            controller:'newController'
           
            
        })
      .state('login',
        {
            url:'/login',
            templateUrl:'partials/login.html',
            controller: 'simpleController',
           
      })
      .state('index',{
            url:'/',
            templeUrl:'basic.html',
            controller:'simpleController'
        
        
      })
        .state('home',{
            url:'/home',
            templateUrl:'/partials/home.html',
            controller:'simpleController',

       }
            
            })
      $urlRouterProvider.otherwise('/')
    });

I just need to hide those two links somehow. I dont think controller code is required, but still i'm posting.

Upvotes: 1

Views: 1157

Answers (1)

Ash
Ash

Reputation: 620

Inject $state into your navbars controller and add the $state object to your scope, as so:

app.controller ('navController',function($scope, $state){
     $scope.$state = $state;
  }

then for your <a> elements that you wish to hide upon login, use:

<a ng-show="$state.includes('login')"/>

This will mean that those links will only show if you are in the 'login' state.

Upvotes: 1

Related Questions