Using events to clear table selections instead of scope

We currently use scope to clear table selections. This is not ideal because it
breaks encapsulation and encourages the use of scope over ctrl. This patch
adds a clear method and uses event propagation to invoke it.

Change-Id: I6115047298d5fa673eabb707a358c84a4e6d9eb6
Closes-Bug: #1544835

horizon/static/framework/widgets/table/hz-select-all.directive.js

@@ -57,6 +57,10 @@
    * </tbody>
    * ```
    *
+   * To clear all of the selected checkboxes after an action, such as
+   * delete, emit the event `hzTable:clearSelected` from your table
+   * controller.
+   *
    */
   function hzSelectAll() {
     var directive = {

horizon/static/framework/widgets/table/table.controller.js

@@ -24,20 +24,27 @@
   /**
    * @ngdoc controller
    * @name horizon.framework.widgets.table.controller:TableController
-   * @description
-   * Controller used by `hzTable`
+   * @description Controller used by `hzTable`
+   * Note that clearSelected is private and event driven.
+   * To clear all of the selected checkboxes after an action, such as
+   * delete, emit the event `hzTable:clearSelected` from your table
+   * controller.
    */
   function TableController($scope) {
+
     var ctrl = this;
-
-    /*eslint-disable angular/controller-as */
-    $scope.selected = {};
-    $scope.numSelected = 0;
-    /*eslint-enable angular/controller-as */
-
     ctrl.isSelected = isSelected;
     ctrl.select = select;
 
+    clearSelected();
+
+    ////////////////////
+
+    var clearWatcher = $scope.$on('hzTable:clearSelected', clearSelected);
+    $scope.$on('$destroy', function() {
+      clearWatcher();
+    });
+
     ////////////////////
 
     /*
@@ -48,6 +55,13 @@
       return angular.isDefined(rowState) && rowState.checked;
     }
 
+    function clearSelected() {
+      /*eslint-disable angular/controller-as */
+      $scope.selected = {};
+      $scope.numSelected = 0;
+      /*eslint-enable angular/controller-as */
+    }
+
     /*
      * set the row selection state
      */

openstack_dashboard/static/app/core/images/table/images.controller.js

@@ -100,13 +100,11 @@
 
     function onDeleteSuccess(e, removedImageIds) {
       ctrl.imagesSrc = difference(ctrl.imagesSrc, removedImageIds, 'id');
-
-      /* eslint-disable angular/controller-as */
-      $scope.selected = {};
-      $scope.numSelected = 0;
-      /* eslint-enable angular/controller-as */
-
       e.stopPropagation();
+
+      // after deleting the items
+      // we need to clear selected items from table controller
+      $scope.$emit('hzTable:clearSelected');
     }
 
     function difference(currentList, otherList, key) {

openstack_dashboard/static/app/core/images/table/images.controller.spec.js

@@ -123,13 +123,14 @@
         expectedImages['2']
       ]);
 
+      spyOn($scope, '$emit').and.callThrough();
       $scope.$emit(events.DELETE_SUCCESS, ['1']);
 
-      expect($scope.selected).toEqual({});
-      expect($scope.numSelected).toEqual(0);
       expect(ctrl.imagesSrc).toEqual([
         expectedImages['2']
       ]);
+
+      expect($scope.$emit).toHaveBeenCalledWith('hzTable:clearSelected');
     });
 
     it('should destroy the event watchers', function() {