У меня два div с одним и тем же ng-контроллером в AngularJS, как я могу заставить их обмениваться информацией?

У меня есть два разных тега div в моем html-коде, ссылающемся на тот же контроллер в AngularJS. Я подозреваю, что, поскольку эти divs не являются вложенными, каждый из них имеет свой собственный экземпляр контроллера, поэтому данные в обоих случаях отличаются.

<div ng-controller="AlertCtrl">
<ul>
    <li ng-repeat="alert in alerts">
        <div class="span4">{{alert.msg}}</div>
    </li>
</ul>
</div>        
<div ng-controller="AlertCtrl">
<form ng-submit="addAlert()">
    <button type="submit" class="btn">Add Alert</button>
</form>
</div>

Я знаю, что это можно легко устранить, включив кнопку в первом div, но я считаю, что это действительно чистый и простой пример, чтобы передать то, что я пытаюсь достичь. Если бы мы нажали кнопку и добавили еще один объект в наш массив оповещений, изменение не будет отражено в первом div.

function AlertCtrl($scope) {

$scope.alerts = [{
    type: 'error',
    msg: 'Oh snap! Change a few things up and try submitting again.'
}, {
    type: 'success',
    msg: 'Well done! You successfully read this important alert message.'
}];

$scope.addAlert = function() {
    $scope.alerts.push({
        type: 'sucess',
        msg: "Another alert!"
    });
};
}

Ответы

Ответ 1

Это очень распространенный вопрос. Кажется, что лучший способ - создать сервис/значение и поделиться между ними.

mod.service('yourService', function() {
  this.sharedInfo= 'default value';
});


function AlertCtrl($scope, yourService) {
  $scope.changeSomething = function() {
    yourService.sharedInfo = 'another value from one of the controllers';
  }

  $scope.getValue = function() {
    return yourService.sharedInfo;
  }
}

<div ng-controller="AlertCtrl">{{getValue()}}</div>
<div ng-controller="AlertCtrl">{{getValue()}}</div>

Ответ 2

Если я правильно понял вопрос, вы хотите синхронизировать две области html с одним и тем же контроллером, сохраняя синхронизацию данных.

так как эти divs не вложены, каждый из них имеет свой собственный экземпляр контроллера, поэтому данные различаются как в

Это неверно, если вы объявляете контроллеры с тем же псевдонимом (я использую более новую версию angular):

<div ng-controller="AlertCtrl as instance">
  {{instance.someVar}}
</div>
<div ng-controller="AlertCtrl as instance">
  {{instance.someVar}} (this will be the same as above)
</div>

Однако, если вы хотите, чтобы они были разными и общались друг с другом, вам придется объявлять разные псевдонимы:

<div ng-controller="AlertCtrl as instance1">
  {{instance1.someVar}}
</div>
<div ng-controller="AlertCtrl as instance2">
  {{instance2.someVar}} (this will not necessarily be the same as above)
</div>

Затем вы можете использовать службы или трансляции для общения между ними (второй следует избегать, жестко).