在AngularJS中我有两个div和同一个ng-controller，我如何让他们共享信息?

I have two different div tags in my html code referencing the same controller in AngularJS. What I suspect is that since these divs aren't nested they each have their own instance of the controller, thus the data is different in both.

我的html代码中有两个不同的div标签，它们引用了AngularJS中的同一个控制器。我怀疑的是，由于这些div不是嵌套的，它们每个都有自己的控制器实例，因此数据在两者中都是不同的。

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

I know this could easily be fixed by including the button in the first div but I feel this is a really clean and simple example to convey what I am trying to achieve. If we were to push the button and add another object to our alerts array the change will not be reflected in the first 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!"
    });
};
}

2 个解决方案

#1

This is a very common question. Seems that the best way is to create a service/value and share between then.

这是一个很常见的问题。似乎最好的方法是创建一个服务/值，然后共享。

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

If I understand the question correctly, you want to sync two html areas with the same controller, keeping data synced.

如果我理解正确，您希望将两个html区域与同一个控制器同步，保持数据同步。

since these divs aren't nested they each have their own instance of the controller, thus the data is different in both

由于这些div不是嵌套的，它们各自都有自己的控制器实例，因此这两个数据都是不同的

This isn't true, if you declare the controllers with the same alias (I'm using more recente angular version):

这不是真的，如果你声明的控制器具有相同的别名(我正在使用更多的角度版本):

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

However, if you WANT them to be different and comunicate each other, you will have to declare different aliases:

然而，如果你想让他们彼此不同，并且互相交流，你就必须声明不同的别名:

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

Then you can use services or broadcasts to comunicate between them (the second should be avoided, tough).

然后您可以使用服务或广播在它们之间进行通信(第二种应该避免，很难)。

#1