Usando Service para comunicação entre controllers

by Diogo Soares

HTML

<div ng-app="myApp">
  <div ng-controller="Controller1 as vm1">
      <h1>Controller 1</h1>      
      <ul ng-repeat="msg1 in vm1.messages1">        
        <div class="content" ng-show="msg1.visivel"></div>
      </ul>
      <p>
        <button ng-click="vm1.postMessage()">Post</button>
      </p>
    </div>
    <p></p>
    <div ng-controller="Controller2 as vm2">
      <h1>Controller 2</h1>
      
      <p>
        <button ng-click="vm2.postMessage()">Post</button>
      </p>
    </div>
</div>

CSS

.content{
  width: 100px;
  height: 100px;
  background: blue;
}

JavaScript

var app = angular.module('myApp', []);

app.factory('messageService', function() {
  var messenger = {
    messages: [],
    addMessage: function(mostrarDiv) {      
      var message = {
        visivel: mostrarDiv
      };      
      this.messages.push(message);
    }
  };
  return messenger;
});

app.controller('Controller1', function(messageService) {
  var vm = this;
  vm.messages1 = messageService.messages;
  
  vm.postMessage = function() {
    messageService.addMessage(true);
  };

});

app.controller('Controller2', function($scope, messageService) {
  var vm = this;
  
  vm.postMessage = function() {
    messageService.addMessage(true);
  };
});