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

Angularjs Share data between two modules

本文关键字：模块 之间 共享 数据 两个 Angularjs      更新时间：2023-09-26

我试图在两个不同模块的两个控制器之间共享服务。我看过一些帖子，让我相信我走在正确的道路上，在这里和这里。但我显然漏掉了什么。这是我的代码和一个codependency。

索引被设置好了，但是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>

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

相关文章：