How to set ng-show on a specific element through different views/controllers?

Question

Plunker: http://plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview

Below is my header, there is an ng-show="cornerLogo" which I only want to be set true on the about, login and register views, but false the home view.

<body id="body_id"
  ng-app="myApp"
  ng-controller="HomeCtrl">

  <header>
    <section ng-show="cornerLogo">
        <h1><a href="index.html">Logo</a></h1>
    </section>

    <nav id="main_nav">
        <ul>
            <li><a ui-sref="about">About</a></li>
            <li><a ui-sref="login">Sign In</a></li>
            <li><a ui-sref="register">Create Account</a></li>
        </ul>
    </nav>
  </header>

  <ui-view></ui-view>

So it works in my HomeCtrl because that is the main controller on the page.

var app = angular.module('app-home', [])
.controller('HomeCtrl', ['$scope', function($scope) {

    $scope.cornerLogo = false;

}]);

However when I switch to the about, login or register views I lose that $scope

Is there a way somehow to have a global var set somewhere in my stateProvider for ui-router? Otherwise, how would you go about this issue?

var app = angular.module('bitAge',
    ['ui.router',
     'app-header',
     'app-home',
     'app-about',
     'app-login',
     'app-register'])

.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: '_views/home.html',
                controller: 'HomeCtrl',
            })

            .state('about', {
                url: '/about',
                templateUrl: '_views/about.html',
                controller: 'AboutCtrl'
            })

            .state('login', {
                url: '/login',
                templateUrl: '_views/login.html',
                controller: 'LoginCtrl'
            })

            .state('register', {
                url: '/register',
                templateUrl: '_views/register.html',
                controller: 'RegisterCtrl'
            });

        // default view:
        $urlRouterProvider.otherwise('/home');
}]);

be careful, you are defining your `HomeCtrl` twice, first in the home state and also in the `body` tag — levi, Jan 20 '15 at 02:34
^-- What he said and where is the ui-view and also module does not have dependency on ui.router? — PSL, Jan 20 '15 at 02:36
@LeonGaban Are you not using `ui-view` at all? Was wondering what are you doing with `ng-controller="HomeCtrl"` ? Your entire code looks confusing to me. You are also not using `ui-sref` which is very convinient. — PSL, Jan 20 '15 at 02:51
? I am using ui-view, I added it to my HTML code above. Also trying to recreate my project here http://plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview — Leon Gaban, Jan 20 '15 at 02:54
@LeonGaban like this? http://plnkr.co/edit/hgEafncN41SQt0c4plw7?p=preview Il update my answer. — PSL, Jan 20 '15 at 03:13

PSL · Accepted Answer · 2015-01-20T03:25:39.033

Apart from my comments in the question, to fix your issue you can take this approach.

You have HomeCtrl specified as bound controller in the state registration of home partial. So instead create a main controller for your application. So that you keep the responsibilities separated out. Inject $state and expose a method called hideLogo and use $state.is to determine the logic to show/hide the logo.

i.e:

var app = angular.module('app-home')
.controller('MainCtrl', ['$scope', '$state',  function($scope, $state) {
   $scope.hideLogo = function(){
     return $state.is('home');
   }
}]);

In the index html use MainCtrl as your main controller for the app.

<body ng-app="myApp" ng-controller="MainCtrl">
    <header>
    <section 
      ng-hide="hideLogo()">
      <h1><a href="index.html">Corner Logo</a></h1>
    </section>

Plnkr

If you want to use $state directly on the view you would need to inject it in MainCtrland set $state on the $scope object so that you can use it directly. Though i highly recommend not to use this technique, you should not expose state in the scope object and ultimately in the view. Just expose only what is needed in the viewmodel.

i.e in the MainCtrl :

 var app = angular.module('app-home')
.controller('MainCtrl', ['$scope', '$state',  function($scope, $state) {
   $scope.$state= $state;
}]);

and just use it on the view as:

<section 
      ng-hide="$state.is('home')">

Thanks, I'll be sure to make a plunker next time before a more advanced question like this one. — Leon Gaban, Jan 20 '15 at 03:25
@LeonGaban No issues. Keep your controllers separate. Nothing wrong creating more and more controllers and have clear separation of concerns. :) — PSL, Jan 20 '15 at 03:26

levi · Answer 2 · 2015-01-20T03:17:56.377

1

You can check your current state and depends on that, show or not your logo.

<section ng-show="$state.includes('home')">
    <h1><a href="index.html">Logo</a></h1>
</section>

Also, your anchor elements to navigate, should be like this <a ui-sref="about">About</a> and so on, because if you use normal href attribute, angular wont change state.

Also, you need to inject $state in your main module and then you can use $state module

    var app = angular.module('myApp',
        ['ui.router',
         'app-home',
         'app-about']).run(function ($state,$rootScope) {
    $rootScope.$state = $state;
})

UPDATE:

Here is the punklr with the answer

edited Jan 20 '15 at 03:17

answered Jan 20 '15 at 02:39

levi

22,001
7
73
74

Ok, I'm using that now, but getting `
` on all views now, not just home?
– Leon Gaban Jan 20 '15 at 02:43
1

@LeonGaban because your anchor elements aren't correct. You need to use `ui-href` not `href`. Check my answer, I updated it. – levi Jan 20 '15 at 02:55
Ok got the plunker ready here, mind a look? :) http://plnkr.co/edit/0efF1Av4lhZFGamxKzaO?p=preview – Leon Gaban Jan 20 '15 at 03:05
1

@LeonGaban i saw the error, let me edit your plunker. – levi Jan 20 '15 at 03:15
@LeonGaban done, look at [here](http://plnkr.co/edit/o2a0DQQvjd7seyOzgUpd?p=preview) you need to inject `$state` in the main module to be able to perfom `$state.includes('home')` – levi Jan 20 '15 at 03:19
Thanks! same answer... your plunker didn't work tho :o – Leon Gaban Jan 20 '15 at 03:26

How to set ng-show on a specific element through different views/controllers?

2 Answers2