feat(events): expose on-open and on-close callbacks

Closes angular-ui#432 angular-ui#1153

Author: Den-dp

src/uiSelectController.js

@@ -472,7 +472,27 @@ uis.controller('uiSelectCtrl',
     }
   };
 
-  // Set default function for locked choices - avoids unnecessary 
+  $scope.$watch(function(){
+    return ctrl.open;
+  }, function(openState, previousState){
+    if (openState !== previousState) {
+      var locals = {};
+      locals[ctrl.parserResult.itemName] = ctrl.selected;
+      if (openState && ctrl.onOpenCallback){
+        ctrl.onOpenCallback($scope, {
+          $item: ctrl.selected,
+          $model: ctrl.parserResult.modelMapper($scope, locals)
+        });
+      } else if (!openState && ctrl.onCloseCallback){
+        ctrl.onCloseCallback($scope, {
+          $item: ctrl.selected,
+          $model: ctrl.parserResult.modelMapper($scope, locals)
+        });
+      }
+    }
+  });
+
+  // Set default function for locked choices - avoids unnecessary
   // logic if functionality is not being used
   ctrl.isLocked = function () {
     return false;

src/uiSelectDirective.js

@@ -59,6 +59,8 @@ uis.directive('uiSelect',
 
         $select.onSelectCallback = $parse(attrs.onSelect);
         $select.onRemoveCallback = $parse(attrs.onRemove);
+        $select.onOpenCallback = $parse(attrs.onOpen);
+        $select.onCloseCallback = $parse(attrs.onClose);
 
         //Set reference to ngModel from uiSelectCtrl
         $select.ngModel = ngModel;

test/select.spec.js

@@ -1375,6 +1375,93 @@ describe('ui-select tests', function() {
     expect(scope.$model).toBe(scope.$item);
   });
 
+  it('should invoke open callback on open', function () {
+
+    scope.onOpenFn = function(){};
+    spyOn(scope, 'onOpenFn');
+
+    var el = compileTemplate(
+      '<ui-select on-open="onOpenFn($item, $model)" ng-model="selection.selected"> \
+        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+        <ui-select-choices repeat="person.name as person in people | filter: $select.search"> \
+          <div ng-bind-html="person.name | highlight: $select.search"></div> \
+          <div ng-bind-html="person.email | highlight: $select.search"></div> \
+        </ui-select-choices> \
+      </ui-select>'
+    );
+
+    openDropdown(el);
+
+    expect(scope.onOpenFn).toHaveBeenCalled();
+    expect(scope.onOpenFn.calls.count()).not.toBe(2);
+
+  });
+
+  it('should pass params to the open callback', function () {
+
+    scope.onOpenFn = function(){};
+    spyOn(scope, 'onOpenFn');
+
+    var el = compileTemplate(
+      '<ui-select on-open="onOpenFn($item, $model)" ng-model="selection.selected"> \
+        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+        <ui-select-choices repeat="person.name as person in people | filter: $select.search"> \
+          <div ng-bind-html="person.name | highlight: $select.search"></div> \
+          <div ng-bind-html="person.email | highlight: $select.search"></div> \
+        </ui-select-choices> \
+      </ui-select>'
+    );
+
+    clickItem(el, 'Samantha');
+
+    expect(scope.onOpenFn).toHaveBeenCalledWith(undefined, undefined);
+
+  });
+
+  it('should invoke close callback on close', function () {
+
+    scope.onCloseFn = function(){};
+    spyOn(scope, 'onCloseFn');
+
+    var el = compileTemplate(
+      '<ui-select on-close="onCloseFn($item, $model)" ng-model="selection.selected"> \
+        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+        <ui-select-choices repeat="person.name as person in people | filter: $select.search"> \
+          <div ng-bind-html="person.name | highlight: $select.search"></div> \
+          <div ng-bind-html="person.email | highlight: $select.search"></div> \
+        </ui-select-choices> \
+      </ui-select>'
+    );
+
+    openDropdown(el);
+    closeDropdown(el);
+
+    expect(scope.onCloseFn).toHaveBeenCalled();
+    expect(scope.onCloseFn.calls.count()).not.toBe(2);
+
+  });
+
+  it('should pass params to the close callback', function () {
+
+    scope.onCloseFn = function(){};
+    spyOn(scope, 'onCloseFn');
+
+    var el = compileTemplate(
+      '<ui-select on-close="onCloseFn($item, $model)" ng-model="selection.selected"> \
+        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+        <ui-select-choices repeat="person.name as person in people | filter: $select.search"> \
+          <div ng-bind-html="person.name | highlight: $select.search"></div> \
+          <div ng-bind-html="person.email | highlight: $select.search"></div> \
+        </ui-select-choices> \
+      </ui-select>'
+    );
+
+    clickItem(el, 'Samantha');
+
+    expect(scope.onCloseFn).toHaveBeenCalledWith(scope.people[5], 'Samantha');
+
+  });
+
   it('should allow creating tag in single select mode with tagging enabled', function() {
 
     scope.taggingFunc = function (name) {