I have a search bar in my index.html template that I need to hide on some pages. I am using ui-router and $state.
The only way I can make this work is to inject $rootscope into all my controllers to either ng-hide: true or false to turn them on or off where needed. (I only really need to hide on 1 or 2 pages)
I don't think this is the correct way to do it as all my controllers are now dependent and injected on the $rootscope.
Is there another way to do this?
Let's start with a global controller example GlobalCtrl which is added to the body or html tag like ng-controller="GlobalCtrl.
Doing this will enable us to keep the scope of this GlobalCtrl throughout your single page Angular app (as you are using ui-router) and we can avoid the usage of $rootScope (actually mimicking the usage of $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 your index.html, just use ng-show:
<div ng-show="globalData.showSearchBar">
<input type="text" ng-model="query" />
</div>
You can access $rootScope from your template using $root in expression. Like:
<div ng-show="$root.appSettings.flag">
<span>Hello!</span>
</div>
For example
<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 that good style, but will simply works.
I don't like going on with a controller, I think that it's better to separate each part of your application in a way that is not dependent of another controller.
I will use a service to share the data:
'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;
}]);
In this way, injecting the service you will always be able to interact with the status variables needed to format correctly your layout.
If you want to reuse a controller you simply have to add a mocked service and you wont need to depend on a controller.
In ui-router you can use abstract states to create hierarchies. This way you can have a parent route witch has the searchbar view and another that does not. All your actual routes can inherit from these two and you are done.
Something like this
$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" />'
},
}
});
I registered the object in the run function of the app
.run([ '$rootScope', function ($rootScope) {
$rootScope.searchBar = { value: true };
}])
Then used the scope to change the value. This stops adding $rootscope into every controller
$scope.searchBar.value = false;
Set the value in the index.html page
<div ng-show="searchBar.value" ng-include src="'app/shared/search.html'"></div>