在角度不同的控制器之间共享状态

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.

Answer 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.

Answer 2

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 (eg 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}} .