I'm currently trying to update my ng-show variable whenever a state changes. In my default index.html file, the code looks like this:
<div id="searchBar" ng-show="searchBar" ng-controller="mainController"></div>
However, since this is not part of my page1 template, the searchBar variable doesn't update when a state changes. The values are changing correctly at the backend, but unfortunately, ng-show isn't aware of these changes.
I'm new to Angular, so I was wondering if anyone has any suggestions on how to make ng-show recognize the changes in searchBar when it's updated in a controller?
var routerApp = angular.module('app', ['ui.router'])
.service('MainShared', function () {
var MainShared = this;
MainShared.searchBar = false;
})
.controller('mainController', function($scope, MainShared) {
$scope.searchBar = MainShared.searchBar;
});
routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/page1');
$stateProvider
.state('page1', {
url: '/page1',
templateUrl: 'pages/templates/page1.html',
controller: 'page1'
});
});
routerApp.controller('page1', function($scope, $http, $state, MainShared) {
MainShared.searchBar = true;
});
EDIT: It's worth mentioning that, based on the answer below, you don't necessarily need a service to achieve this functionality.