Angular.js在两个模块之间共享数据

Question

I'm trying to share a service between two controllers in two different modules. 我正在尝试在两个不同模块中的两个控制器之间共享服务。 I've seen posts that lead me to believe I'm on the right track, here and here . 我看到过一些帖子，使我相信自己在这里和这里都处在正确的轨道上。 But I'm obviously missing something. 但是我显然缺少了一些东西。 Here is my code and a codepen . 这是我的代码和一个Codepen 。

The index is being set okay, but isSidebarActive isn't being fired automatically like one would expect. 索引设置正确，但是isSidebarActive不会像人们期望的那样自动被触发。 Any help would be much appreciated. 任何帮助将非常感激。 Thank you! 谢谢！

index.js 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 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>

Answer 1

Try this: 尝试这个：

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

You must call the function shell.isSidebarActive() in ng-show and ng-hide http://codepen.io/anon/pen/EjpeoR 您必须在ng-show和ng-hide调用函数shell.isSidebarActive() http://codepen.io/anon/pen/EjpeoR

Angular.js在两个模块之间共享数据

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-07-19 04:35:51

Angular.js在两个模块之间共享数据

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-07-19 04:35:51

解决方案1
0 已采纳 2015-07-19 04:35:51