sharing state between different controllers in angular

Question

I have two controls : Left Side Navigation and the right pane that changes the content on clicking of any item on left navigation.

Here is the html (angular view):

<nav class="navigation">
        <ul class="list-unstyled" ng-controller="NavigationController as navigation">
            <li ng-repeat="nav in navigation.tabs" class="has-submenu">
                <a href="#" ng-click="navigation.changeContent(nav.name)">{{nav.name}}</a>
                <ul class="list-unstyled" ng-show="nav.subNav">
                    <li ng-repeat="subnav in nav.subNav"><a href="#" ng-click="navigation.changeContent(subnav.name)">{{subnav.name}}</a></li>
                </ul>
            </li>
        </ul>
    </nav>

<section class="content" ng-controller="ContentSwitcher as content">
{{content.tab}}
<div class="warper container-fluid" >
<div class="container-scroll"></div>
</div>
</section>

And here is the controller

(function () {
    var app = angular.module('provisioning', []);

    app.service('contentService',function(){
       var tab = 'Dashboard';
        return {
            getTab : function(){ return tab; },
            setTab : function(value){ tab = value}
        }
    });
    app.controller('NavigationController',['contentService','$log', function(cs,log){
        this.tabs = [
            {
                name: 'Dashboard'
            },
            {
                name: 'Manage',
                subNav: [
                    {
                        name: 'Account'
                    },
                    {
                        name: 'Facility'
                    },
                    {
                        name: 'Doctors'
                    },
                    {
                        name: 'Patients'
                    },
                    {
                        name: 'Nurses'
                    },
                    {
                        name: 'Device Inventory'
                    }

                ]
            },
            {
                name: 'Health Tracker'
            },
            {
                name: 'Reports'
            },
            {
                name: 'Settings'
            },
            {
                name: 'Logout'
            }
        ];
        var template = this;
        this.changeContent = function(tab){
            cs.setTab(tab);
        }
    }]);
    app.controller('ContentSwitcher', ['contentService',function(cs){
        this.tab = cs.getTab();
    }]);
})();

Also, is it best way to achieve what I intend to do in angularjs? I created a service and shared the variable in the two different controllers. However it doesn't work. The content on right never gets updated on clicking any of the item on left menu.

Do I get an upvote for suggesting a reasonable an alternative approach? — APD, Mar 20 '15 at 10:42

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

My answer to a previous question may help. It uses a type of observer pattern.

AngularJs update directive after a call to service method

Your service would change to allow all interested controller or directives to either generate or listen for certain events and access the associated data.

edited May 23 '17 at 11:50

Community

1
1

answered Mar 19 '15 at 07:34

APD

1,459
1
13
19

How these type of cases are generally handled? Is it the correct way. Or it is some design flaw and controllers should be structured in a different fashion? – beNerd Mar 19 '15 at 08:41
There are many options,$emit on rootScope if the controllers do not have a parent/child relationship, or use service to maintain state as you have tried. In your code the 2nd controller is not notified the data has changed. – APD Mar 19 '15 at 08:51
is there a way I can change my approach to make it work somehow? – beNerd Mar 19 '15 at 09:02
I answered your question with a way to make this work with services. – Jonathan Mar 19 '15 at 09:10
Before making any design decisions on using $apply or $watch or $broadcast you should read the documentation. This post http://stackoverflow.com/questions/15112584/using-scope-watch-and-scope-apply, is a good start. – APD Mar 19 '15 at 09:22
I ended up broadcasting on rootScope. May be not the best approach! – beNerd Mar 20 '15 at 10:37

Jonathan · Answer 2 · 2015-03-19T09:12:06.760

0

You need to tell your controller that the value of the tab has changed and then update it with the new value from the service. The second controller (ContentSwitcher) can not know, that the value changed and you simply assigned the string value of getTab once to this.tab.

One way to archive this automatically is changing the type of the variable inside your serivce from string to an object (e.g. tab = {name:'Dashboard'}) and then call $scope.$apply after you made changes to it.

In your first controller you still assign this.tab = service.getTab() (which will be an object) and in your view {{tab.name}}.

edited Mar 19 '15 at 09:12

answered Mar 19 '15 at 07:32

Jonathan

3,614
3
21
30

How these type of cases are generally handled? Is it the correct way. Or it is some design flaw and controllers should be structured in a different fashion? – beNerd Mar 19 '15 at 08:27

sharing state between different controllers in angular

2 Answers2