Angularjs在两个模块之间共享数据

问题描述：

我试图在两个不同模块中的两个控制器之间共享一个服务。我见过的帖子让我相信我在正确的轨道上，here和here。但我显然错过了一些东西。这是我的代码和codepen。Angularjs在两个模块之间共享数据

该索引正在设置好，但是isSidebarActive不会像所期望的那样被自动触发。任何帮助将非常感激。谢谢！

index.js

angular 
    .module('app', ['app.layout', 'app.sidebar']); 
angular 
    .module('app.layout', []) 
    .service('layoutService', function() { 
     var vm = this; 
     var sidebarStatus = null; 
     vm.isSidebarActive = function() { 
      console.log('isSidebarActive: ' + (sidebarStatus ? 'true' : 'false')); 
      return sidebarStatus; 
     }; 
     vm.setSidebarStatus = function(status) { 
      console.log('setSidebarStatus: ' + (status ? 'true' : 'false')); 
      sidebarStatus = status; 
     }; 
    }) 
    .controller('ShellController', ['layoutService', function(layoutService) { 
     var vm = this; 
     vm.isSidebarActive = function() { 
      return layoutService.isSidebarActive(); 
     } 
    }]); 

angular 
    .module('app.sidebar', ['app.layout']) 
    .controller('SidebarController', ['layoutService', function(layoutService) { 
     var vm = this; 
     var index = null; 
     vm.setIndex = function(i) { 
      index = i; 
      layoutService.setSidebarStatus(i > 0); 
      console.log('setIndex: ' + index); 
     }; 
     vm.isIndex = function (i) { 
      return index === i; 
     }; 
    }]);

的index.html

<body ng-app="app"> 
    <div ng-controller="ShellController as shell"> 
    <div class="alert alert-info" ng-show="shell.isSidebarActive">active</div> 
    <div class="alert alert-warning" ng-hide="shell.isSidebarActive">non-active</div> 
    <div/> 
    <div ng-controller="SidebarController as sidebar"> 
    <a class="btn" ng-click="sidebar.setIndex(1)">active</a> 
    <a class="btn" ng-click="sidebar.setIndex(0)">non-active</a> 
    <div/> 
</body>

答

试试这个：

<body ng-app="app"> 
     <div ng-controller="ShellController as shell"> 
     <div class="alert alert-info" ng-show="shell.isSidebarActive()">active</div> 
     <div class="alert alert-warning" ng-hide="shell.isSidebarActive()">non-active</div> 
     <div/> 
     <div ng-controller="SidebarController as sidebar"> 
     <a class="btn" ng-click="sidebar.setIndex(1)">active</a> 
     <a class="btn" ng-click="sidebar.setIndex(0)">non-active</a> 
     <div/> 
    </body>

必须调用函数shell.isSidebarActive()在ng-show和ng-hide http://codepen.io/anon/pen/EjpeoR

从第二个模块中删除数组。 – Ved

谢谢你，我花了很长时间才弄清楚。 – user3009902

Angularjs在两个模块之间共享数据

相关推荐