Show and hide with $ rootscope

Question

I have a search bar in my index.html template that I need to hide on some pages. I use ui-router and $state .

The only way I can do this work is to enter $rootscope into all my controllers, either in ng-hide: true or false , to turn them on or off where necessary. (I really need to hide on 1 or 2 pages)

I don't think this is the right way to do this, since all my controllers are now dependent and injected into $rootscope .

Is there any other way to do this?

Answer 1

Start with the GlobalCtrl global controller GlobalCtrl that is added to the body or html tag, for example ng-controller="GlobalCtrl .

Doing this will allow us to save the scope of this GlobalCtrl in your only Angular page (as you use ui-router ), and we can avoid using $rootScope (actually simulating using $rootScope ).

Now, inside your GlobalCtrl define something like this:

 // Using an object to avoid the scope inheritance problem of Angular // https://github.com/angular/angular.js/wiki/Understanding-Scopes $scope.globalData = {showSearchBar: true}; // This callback will be called everytime you change a page using ui-router state $scope.$on('$stateChangeStart', function(event, toState, toParams) { $scope.globalData.showSearchBar = true; // Just check for your page where you do not want to display the search bar // I'm using just an example like I don't want to display in contac-us page named state if (toState.name == 'contact-us' || toParams.foo == "bar") { $scope.globalData.showSearchBar = false; } }); 

Now, in index.html , just use ng-show :

 <div ng-show="globalData.showSearchBar"> <input type="text" ng-model="query" /> </div> 

Answer 2

for instance

 <div ng-controller="SearchCtrl"> <div ng-if="show"> ... </div> </div> app.controller('SearchCtrl', ['$state', '$scope', function($state, $scope) { $scope.show = !$state.is('someState1') && !$state.is('someState2'); } 

This is not a good style, but it just works.

Answer 3

I don’t like working with the controller, I think it’s better to separate each part of your application so that it does not depend on another controller.

I am using a data sharing service:

 'use strict'; angular.module('yourModule') /** A service used to share resources between controllers */ .factory('Shared', [function () { var resources = {}; resources.targetList = []; resources.isVisibleDivA = true; resources.isVisibleDivB = false; return resources; }]); 

Thus, by introducing a service, you can always interact with the statutory variables necessary to properly format your layout.

If you want to reuse the controller, you just need to add the mocked service, and you will not need to depend on the controller.

Answer 4

In ui-router you can use abstract states to create hierarchies. That way, you can have a parent route that looks like a search, and the other doesn't. All of your actual routes can inherit from these two, and you are done.

Something like that

 $stateProvider .state('rootLayout', { abstract: true, // Note: abstract still needs a ui-view for its children to populate. // You can simply add it inline here. template: '<div><div ui-view="topbar"></div><div ui-view></div></div>' }) .state('searchbarLayout', { abstract: true, views: { '@rootLayout': { // Note: abstract still needs a ui-view for its children to populate. // You can simply add it inline here. template: '<div ui-view></div>' }, ' topbar@rootLayout ': { template: '<input type="search" />' }, } }); 

Answer 5

You can access $ rootScope from your template by using $root in the expression. How:

 <div ng-show="$root.appSettings.flag"> <span>Hello!</span> </div> 

Answer 6

I registered an object in the application launch function

 .run([ '$rootScope', function ($rootScope) { $rootScope.searchBar = { value: true }; }]) 

Then the scope was used to change the value. This stops adding $ rootcope to each controller

 $scope.searchBar.value = false; 

Set the value on the index.html page

 <div ng-show="searchBar.value" ng-include src="'app/shared/search.html'"></div>