Using $emit and $on to work with two Controllers in AngularJS

Question

I want to define a communication between CtrlOne (Parent) and CtrlTwo (Child). In this topic was the solution to define scope: $scope but I can't do this because I'm using a service for my modal window.

In CtrlOne I have a table list with items. The items I'm getting of my service which does http requests. When I click on a row the selected items will displayed in the modal window which using the CtrlTwo. When I'm doing changes the table will automatically updated (two-way-data-binding). But when I click on reset btn then only the form in modal window will cleared.

View of CtrlOne:

<tr ng-repeat="item in list>
  <td>{{ item.lname }}</td>
  <td>{{ item.fname }}</td>
</tr>

CtrlOne:

var arrIndex;
$rootScope.$on('reset', function (evt, item) {
  arrIndex = item.items;
  $log.info('arrIndex:', arrIndex.Id);

  if ($scope.list.indexOf(arrIndex)) {
     $scope.list[arrIndex];
  } else {
     $.log.error('false');
  }
});

Id is defined in the WebAPI (server-side) and will automatically incremented.

CtrlTwo:

//reset btn
$scope.reset = function () {
  $scope.selected = angular.copy($scope.copyItem);
  $scope.$emit('reset', { items: $scope.selected });
}

//cancel btn
$scope.cancel = function () {
  $modalInstance.dismiss('cancel');
}

View of CtrlTwo:

//modal window form
<div class="form-group-sm>
   <input type="text" 
          class="form-control" 
          ng-model="selected.lname" 
          ng-required="true"
   />
   <input type="text" 
          class="form-control" 
          ng-model="selected.fname" 
          ng-required="true"
   />
</div>

How can I resolve this?

Joao Leal · Answer 1 · 2015-06-12T14:50:42.140

1

I would do everything with a service and forget about the broadcasting of events. Your service could be like this:

angular('myApp').factory('myService', myService);

myService.$inject = ['$http'];
function myService ($http) {
   var items = [];
   var editIndex;
   var editItem = {};
   return {
     init: function() { return $http.get(...); }, //method to initiate the items array
     setEditItem: function(i) { 
        editIndex = i;
        angular.extend(editItem, items[editIndex]); //create shallow copy of the object (replace with angular.copy if needed)
     },
     getEditItem: function() { return items[editIndex]; },
     saveEditItem: function() { angular.extend(items[editIndex], editItem); },
     resetEditItem: function() { angular.extend(editItem, items[editIndex]); }
   };
});

Then on your Controller1 you would just do everything normally, but on selection you would also need to call the setEditItem method from the service.

$scope.open = function (index) {
  myService.setEditItem(index);      
  modalService.openDialog();
}

On Controller 2 you set your editItem to the service.getEditItem()

angular('myApp').controller('MyController2', MyController2);

MyController2.$inject = ['myService'];
function MyController(myService)
{
   var me = this; //I'm using the ControllerAs syntax, inject and assign variables to $scope if you prefer it otherwise

   me.editItem = myService.getEditItem(); //this is an object
   me.resetItem = myService.resetEditItem; //this is a function
   me.saveItem = myService.saveEditItem; //this is a function
}

edited Jun 12 '15 at 14:50

answered Jun 12 '15 at 14:04

Joao Leal

5,533
1
13
23

that's a nice answer but I have a service for my $modal method! The CRUD Operations are in the CtrlTwo. How can I handle the scope? Cancel btn does nothing. The changes appear only when I go to an other page and go back to the table list. – yuro Jun 12 '15 at 14:13
It shouldn't matter, the view in your modal must be attached to a controller right? in that controller that's where you use "my" code for CtrlTwo. CtrlOne's responsibility is just to set the selected index/item and launch the modal. – Joao Leal Jun 12 '15 at 14:23
Yeah, I've defined the CtrlOne in the service for the $modal method. In the modal ctrl i'm using resolve variables you know and this variables won't changed to the old values. – yuro Jun 12 '15 at 14:36
It's tough to explain without seeing the rest of the code – Joao Leal Jun 12 '15 at 14:38
Here is an older topic by me with the same problem. Click on this link [HERE](http://stackoverflow.com/questions/30780808/reset-the-changed-values-doesnt-work-in-other-ctrl-angularjs) – yuro Jun 12 '15 at 14:40
I just edited my post. Try to change your logic, so that Controller1 open function does what I just did. That should make it clear what you have to change on Controller2. – Joao Leal Jun 12 '15 at 14:51
It is a bit confused because my CRUD is in the Modal Ctrl. And my dialog service needs two parameters and that's the parameters for the list and the selectedItem. `$scope.nameslist = reqService.names.query()` , `$scope.open = function (item) { $scope.selectedItem = item; modalService.openDialog($scope.namelist, $scope.selectedItem); }` – yuro Jun 12 '15 at 15:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80408/discussion-between-joao-leal-and-yuro). – Joao Leal Jun 12 '15 at 15:07
What I don't understand is, for addItem and deleteItem the table list from Ctrl One will changed although the Create and delete are defined in Modal Ctrl. `namedList.push(newItem);` works. – yuro Jun 12 '15 at 15:09
Could we discuss it a bit later? I'm at work. How can I reach you? – yuro Jun 12 '15 at 15:10
you can click that chat link above – Joao Leal Jun 12 '15 at 15:11

score -1 · Answer 2 · answered Jun 12 '15 at 14:37

-1

You are doing $scope.$emit('reset', ...), when you should be doing it on the $rootScope:

$rootScope.$emit('reset', ...)

answered Jun 12 '15 at 14:37

SamJB

104
3

it doesn't work I've already tried `$rootScope` but it's the same problem. – yuro Jun 12 '15 at 14:39
Emit sends an event upwards in the scope hierarchy, broadcast would be more appropriate to use with rootScope. But this seems not to be the problem here – Erik Svedin Jun 14 '15 at 14:22
@ErikSvedin I don't understand how can upload the CtrlTwo the table list when I'm removing or creating items but when I click reset or cancel then the changes don't stopped and remain. – yuro Jun 16 '15 at 07:43

Using $emit and $on to work with two Controllers in AngularJS

2 Answers2