我的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!"
});
};
}
解决方法
这是一个很常见的问题.似乎最好的办法就是创建一个服务/价值,然后分享.
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>
