Angularjs Обмен данными между двумя модулями

Question

Angularjs Обмен данными между двумя модулями

0

Я пытаюсь использовать службу между двумя контроллерами в двух разных модулях. Я видел сообщения, которые заставляют меня поверить, что я на правильном пути, здесь и здесь. Но я, очевидно, что-то пропустил. Вот мой код и код.

Индекс устанавливается в порядке, но 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>

user3009902 19 июль 2015, в 06:53

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

monkey · Accepted Answer · 2015-07-19T02-26-00.000Z

Попробуй это:

<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

Удалите массив из вашего второго модуля.
Спасибо, это заняло у меня много времени, чтобы понять.