So, I'm using the sidenav and I'm having trouble making my navbar dynamic.
It used to work with this:
<ion-nav-bar ng-class="$root.color"></ion-nav-bar>
controller('childStateCtrl', function($scope) {
$scope.$root.color = 'state-color';
}
That method stopped working though.
This is the basic idea of what I've got going on now:
controller('SidenavCtrl', function($scope) {
var vm = this;
vm.color = '';
$scope.$on('stateColor', function(event,data) {
vm.color = data;
return vm.color;
} }
<ion-nav-bar ng-class="{{vm.color}}"></ion-nav-bar>
I tried emit in other controllers but right now I have it in the config like this:
$stateProvider.state('sidenav.childState', {
views: {
'sidenav-view': {
onEnter: function($scope) {
$scope.$emit('colorChange', 'new-color');
} } } }
I am quite sure it will not work cause you are emitting/broadcasting before the controller gets executed, anyway you can try:
$stateProvider.state('sidenav.childState', {
views: {
'sidenav-view': {
onEnter: function($rootScope) {
$rootScope.$broadcast('colorChange', 'new-color');
} } } }
controller('SidenavCtrl', function($scope) {
var vm = this;
vm.color = '';
$scope.$on('colorChange', function(event, data) {
console.log('New color is ' + data);
} }
I think the proper way is to use a directive for your element it could ba a css class/ data attribute or element it self, as you wish.
I'd still appreciate any input on how $on/$emit/$broadcast could have worked for this, but I got my dynamic nav-bar with a simpler method that doesn't create any unnecessary scopes.
For anybody else trying to make a nav-bar with dynamic colors:
<ion-nav-bar class="nav-title-slide-ios7
ng-class:{'bar-positive': $state.includes('*.state1.**'),
'bar-assertive': $state.includes('*.state2.**')};">
</ion-nav-bar>
I globbed my states there so that their children can also return true.