There is some web application in which a factory was created to inform the user.

angular .module('app') .factory('messages', messages); function messages() { var _data = []; function _add(header, body) { if (_data == null) _data = []; _data.push({ header: header, body: body}); }; function _remove(id) { _data.splice(id, 1); } function _read() { return _data == null ? [] : _data; } return { add: _add, read: _read, remove: _remove }; }

All main controllers interact with the factory. The result is displayed in the base template for all html pages:

 <div class="container body-content" > @RenderBody() <div class="push-messages" ng-controller="messagesCtrl" ng-cloak> <div class="alert" ng-repeat="message in data()"> <button type="button" ng-click="removeAt($index)" class="close" data-dissmiss="alert">&times;</button> <strong>{{message.header}}</strong> {{message.body}} </div> </div> </div>

The very messageCtrl :

 angular .module('app') .controller('messagesCtrl', messagesCtrl); messagesCtrl.$inject = ['$scope', 'messages']; function messagesCtrl($scope, messages) { $scope.data = messages.read; $scope.removeAt = messages.remove; }

The problem is that when you add a message from some controller, all messages except a will be displayed in the ng-repeate messagesCtrl controller. At the subsequent addition of the message b , a added inside the ng-repeate , but b is not. That is, when adding the n message, only n-1 will be displayed. If you call the add function of the messages factory inside the messages controller, then there will not be such an incomprehensible delay, the list inside ng-repeate will be updated and show all messages.

Hierarchy of controllers in battery

Hierarchy of controllers in battery

There is a suspicion that it behaves this way, because I generate a list of messages inside the page wizard (then the Asp.net mvc tag)

Plunker

If an error occurs inside the dataSource controller, it should immediately appear in the ng-repeat mesCtrl controller. This is not happening. When you click on the update button, once again we try to get non-existent data, an error is generated, we do not see it, but an old one appears.

  • Add more code so that you can see exactly what you are doing; the description with words is not entirely clear. It's not entirely clear what side of asp.net-mvc just because the page is displayed through it? - Grundy
  • Ideally: add a minimal reproducible example - Grundy
  • Don't use the battery sometimes. It can break the code so that when the plug-in is turned on and off, the behavior is different. and in principle, he is nothing special and does not show. Add more code. as you say, almost nothing is clear how it works for you and where you're calling from - Grundy
  • create an example on plunkr in which your problem will be reproduced - Grundy
  • thanks, I’m doing it now - Denis

1 answer 1

The problem is that the angular does not know that something has been updated and that the view needs to be redrawn.

To fix, you can call the $ scope. $ Apply function, for example:

 $scope.$apply(function(){messages.add("Error "+count++, e.xhr.statusText);});

Corrected plunkr

Usually this function is called automatically during user events, for example, click , as well as with ajax requests using the $http service, this library probably uses something of its own, so you need to call everything manually.

  • Many thanks, all the same, the obvious solution when I managed to localize the problem, I could not figure it out) - Denis
  • @Denis, in most cases when using third-party libraries and delaying the update view, it is this error that the angular simply does not know what to redraw everything - Grundy
  • You wrote that it is better not to use the battery, then what would you recommend using to monitor data inside the controllers? - Denis
  • @Denis, console.log :-) for example. in the right places. - Grundy
  • very unexpectedly) we will use the console means - Denis