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

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 update directive after a call to service method

您的服務會改變，讓所有感興趣的控制器或指令來產生或偵聽特定事件和訪問相關數據。

Answer 2

您需要告訴控制器該選項卡的值已更改，然後使用服務中的新值進行更新。第二個控制器（ContentSwitcher）無法知道，該值已更改，並且您只需將getTab的字符串值分配給this.tab。自動歸檔此

一種方法是從string改變變量的類型你serivce裏面的object（例如tab = {name:'Dashboard'}），然後調用$scope.$apply你做了一些改動後。

在您的第一個控制器中，您仍然分配了this.tab = service.getTab()（這將是一個對象）並在您的視圖{{tab.name}}中。