javascript - 在 Angular 中的不同 Controller 之间共享状态

Question

我有两个控件:左侧导航和右侧 Pane ，单击左侧导航上的任何项目即可更改内容。

这是 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>

这是 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();
    }]);
})();

此外，这是实现我打算在 angularjs 中实现的最佳方法吗？我创建了一个服务并在两个不同的 Controller 中共享变量。然而它不起作用。单击左侧菜单上的任何项目后，右侧的内容永远不会更新。

Answer 1

我对上一个问题的回答可能会有所帮助。它使用一种观察者模式。

AngularJs update directive after a call to service method

您的服务将发生更改，以允许所有感兴趣的 Controller 或指令生成或监听某些事件并访问关联的数据。