I have a question in AngularJS!
The source code is at link
In the factory I have a property named identity , which is mirrored to the controller and displayed in the view. When adding a new message this property is incremented correctly, the problem is that it is not updated in the view.
You are preserving a value, not the object. messages and identity are properties of the messageService service. The sequence in your code is as follows:
I changed your code to preserve the instance, like this:
vm1.ms = messageService;
Functional example below:
var app = angular.module('plunker', []);
app.factory('messageService', function() {
var messenger = {
messages: [],
identity: 0,
addMessage: function(text, caller) {
this.identity += 1;
var id = this.identity,
message = {
text: caller + ": " + text + ": " + id,
id: id
};
this.messages.push(message);
}
};
return messenger;
});
app.controller('Controller1', function(messageService) {
var vm1 = this;
vm1.ms = messageService; // ALTERAÇÃO
vm1.post = {
text: ''
};
vm1.postMessage = function() {
messageService.addMessage(vm1.text, "controller 1");
vm1.text = '';
};
});
app.controller('Controller2', function($scope, messageService) {
var vm2 = this;
vm2.ms = messageService; // ALTERAÇÃO
vm2.post = {
text: ''
};
vm2.postMessage = function() {
messageService.addMessage(vm2.text, "controller 2");
vm2.text = '';
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><htmlng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"data-require="[email protected]"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Controller1 as vm1">
<h1>Controller 1 - {{vm1.ms.identity}}</h1>
<ul ng-repeat="msg1 in vm1.ms.messages">
<li>{{msg1.text}}</li>
</ul>
<p>
Controller 1 Message: <input type="text" ng-model="vm1.text">
<button ng-click="vm1.postMessage()">Post</button>
</p>
</div>
<p></p>
<div ng-controller="Controller2 as vm2">
<h1>Controller 2 - {{vm2.ms.identity}}</h1>
<ul ng-repeat="msg2 in vm2.ms.messages">
<li>{{msg2.text}}</li>
</ul>
<p>
Controller 2 Message: <input type="text" ng-model="vm2.text">
<button ng-click="vm2.postMessage()">Post</button>
</p>
</div>
</body>
</html>