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

Question

我有两个控件：左侧导航和右侧窗格，它们在单击左侧导航上的任何项目时更改内容。

这是html（角度视图）：

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

这是控制器

(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中完成的最佳方法？ 我创建了一个服务，并在两个不同的控制器中共享了该变量。 但是，它不起作用。 单击左侧菜单上的任何项目，始终不会更新右侧的内容。

Answer 1

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

调用服务方法后AngularJs更新指令

您的服务将更改为允许所有感兴趣的控制器或指令生成或侦听某些事件并访问关联的数据。

Answer 2

您需要告诉控制器选项卡的值已更改，然后使用服务中的新值对其进行更新。 第二控制器（ ContentSwitcher ）不知道，该值改变，你只需指定的字符串值getTab一次this.tab 。

自动存档的一种方法是将您服务中的变量类型从string更改为object （例如tab = {name:'Dashboard'} ），然后在对它进行更改后调用$scope.$apply 。

在您的第一个控制器中，您仍将分配this.tab = service.getTab() （将是一个对象），并在您的视图中{{tab.name}} 。