Updating ng-show from different controller

Question

I am trying to figure out how to update my ng-show variable when a state is changed. In my default index.html file I have:

<div id="searchBar" ng-show="searchBar" ng-controller="mainController"></div>

Since this is not part of my page1 template, searchBar does not get updated when a state is changed. The variables are actually changing correctly, but ng-show does not know this.

I'm knew to angular, but does anyone have any suggestions on getting ng-show to notice the change in searchBar when it is changed 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: Let it be known, that from the below answer, you do not need to have a service to do this.

score 4 · Accepted Answer · answered Apr 28 '15 at 02:04

4

Use $rootScope

.controller('mainController', function($scope, $rootScope) {
    console.log($rootScope.searchBar);
});


routerApp.controller('page1', function($scope, $rootScope, $http, $state) {
    $rootScope.searchBar = true;
});

answered Apr 28 '15 at 02:04

Sharn White

624
3
15

1

Thanks man! Worked perfectly. I had no idea what `$rootScope` was, so thanks for the link to the documentation. – bryan Apr 28 '15 at 02:07
2

Putting things on the $rootScope is the same as putting things in a global scope. Fine if you have a handful of things, but be careful not to pollute it. – user2943490 Apr 28 '15 at 02:09
Thanks! :) For now just use $rootScope sparingly when you really need to share data/functions between controllers. It's better for design/performance to keep to $scope where you can, but if you're new to angularJS and your apps aren't huge it won't hurt. – Sharn White Apr 28 '15 at 02:11
1

Yea, only going to be a few things for my "global" template to show and hide depending on the page. My app is pretty huge as I transition it all to angular but I will def be smart about it. – bryan Apr 28 '15 at 02:12
1

It is cleaner to add your whole service `MainShared` on $rootScope and in your HTML you use `ng-show="MainShared.searchBar"`. It makes more sense and is reusable if you add other things in MainShared. – floribon Apr 28 '15 at 02:35

score 0 · Answer 2 · answered Apr 28 '15 at 02:14

parentScope.show = 1;
childScope.show = 2;

Wont work. (Second statement will not update value in parent scope)

parentScope.object = {};
parentScope.object.show = 1;
childScope.object.show = 2;

Will work. (Second statement will update value in parent scope)

So just put 'searchbar' inside some other object in scope.

Updating ng-show from different controller

2 Answers2