在角度不同的控制器之間共享狀態

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