Doubt in Angularjs! (Factory, Controller, View) Why is 'Identity' not updated in the VIEW?

Asked

Viewed 60 times

1

Guys I’m having a doubt in Angularjs!

The source code is in https://plnkr.co/edit/BoIr6nFCa8ST5ekT3DZO

In Factory I have a property with the name 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.

javascript angularjs angularjs-services angularjs-factorys

1 answer

2


You’re preserving a value, not the object. messages and identity are service properties messageService. The sequence in your code is as follows:

  • messageService is initialized. Property identity receives the amount literal 0.
  • local variable of controller receives the amount literal present in messageService.Identity property (0), in practice copying the value.
  • messageService.Identity is updated, but since the value is literal and not a reference, local variables remain untouched.

I changed your code to preserve the instance, so:

vm1.ms = messageService;

Functional example to follow:

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>

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

  • Or else I encapsulate the identity on a specific object, right? I’m not very happy with having to expose the entire service in a controller variable. This is best practice for this case?

  • @Exact Lucasboeingscarduelli, you can encapsulate the desired properties in an object.

Browser other questions tagged javascript angularjs angularjs-services angularjs-factorys

You are not signed in. Login or sign up in order to post.