12

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

我知道这可以通过在第一个 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!"
    });
};
}
4

2 回答 2

18

这是一个很常见的问题。似乎最好的方法是创造服务/价值并在两者之间分享。

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>
于 2013-03-02T04:12:33.023 回答
1

如果我正确理解了这个问题，你想用同一个控制器同步两个 html 区域，保持数据同步。

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

这不是真的，如果您声明具有相同别名的控制器（我使用的是更新的角度版本）：

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

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

于 2016-07-18T02:19:45.710 回答