У меня есть два разных тега 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!"
});
};
}