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

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