feat(uiSref): switch custom events prop from event: to events:

Author: christopherthielen

src/directives/stateDirectives.ts

@@ -101,7 +101,7 @@ function bindEvents(element: IAugmentedJQuery, scope: IScope, hookFn: (e: JQuery
   let events;
 
   if (uiStateOpts) {
-    events = uiStateOpts.event;
+    events = uiStateOpts.events;
   }
 
   if (!isArray(events)) {
@@ -182,13 +182,23 @@ function bindEvents(element: IAugmentedJQuery, scope: IScope, hookFn: (e: JQuery
  *
  * ### Transition Options
  * You can specify [[TransitionOptions]] to pass to [[StateService.go]] by using the `ui-sref-opts` attribute.
- * Options are restricted to `location`, `inherit`, `reload`, and `event`.
+ * Options are restricted to `location`, `inherit`, and `reload`.
  *
  * #### Example:
  * ```html
  * <a ui-sref="home" ui-sref-opts="{ reload: true }">Home</a>
  * ```
  *
+ * ### Other DOM Events
+ *
+ * You can also customize which DOM events to respond to (instead of `click`) by
+ * providing an `events` array in the `ui-sref-opts` attribute.
+ *
+ * #### Example:
+ * ```html
+ * <input type="text" ui-sref="contacts" ui-sref-opts="{ events: ['change', 'blur'] }">
+ * ```
+ *
  * ### Highlighting the active link
  * This directive can be used in conjunction with [[uiSrefActive]] to highlight the active link.
  *
@@ -340,14 +350,24 @@ uiSref = ['$uiRouter', '$timeout',
  *
  * ### Transition Options
  * You can specify [[TransitionOptions]] to pass to [[StateService.go]] by using the `ui-state-opts` attribute.
- * Options are restricted to `location`, `inherit`, `reload`, and `event`.
+ * Options are restricted to `location`, `inherit`, and `reload`.
  * The value of the `ui-state-opts` is `$watch`ed and evaluated as an expression.
  *
  * #### Example:
  * ```html
  * <a ui-state="returnto.state" ui-state-opts="{ reload: true }">Home</a>
  * ```
  *
+ * ### Other DOM Events
+ *
+ * You can also customize which DOM events to respond to (instead of `click`) by
+ * providing an `events` array in the `ui-state-opts` attribute.
+ *
+ * #### Example:
+ * ```html
+ * <input type="text" ui-state="contacts" ui-state-opts="{ events: ['change', 'blur'] }">
+ * ```
+ *
  * ### Highlighting the active link
  * This directive can be used in conjunction with [[uiSrefActive]] to highlight the active link.
  *

test/stateDirectivesSpec.js

@@ -555,7 +555,7 @@ describe('uiStateRef', function() {
       it('should bind single HTML events', inject(function($compile, $state, $timeout) {
         expect($state.current.name).toEqual('top');
 
-        el = angular.element('<input type="text" ui-state="state" ui-state-opts="{ event: [\'change\'] }">');
+        el = angular.element('<input type="text" ui-state="state" ui-state-opts="{ events: [\'change\'] }">');
 
         scope.state = 'contacts';
         $compile(el)(scope);
@@ -570,7 +570,7 @@ describe('uiStateRef', function() {
       it('should bind multiple HTML events', inject(function($compile, $state, $timeout) {
         expect($state.current.name).toEqual('top');
 
-        el = angular.element('<input type="text" ui-state="state" ui-state-opts="{ event: [\'change\', \'blur\'] }">');
+        el = angular.element('<input type="text" ui-state="state" ui-state-opts="{ events: [\'change\', \'blur\'] }">');
 
         scope.state = 'contacts';
         $compile(el)(scope);
@@ -593,7 +593,7 @@ describe('uiStateRef', function() {
       it('should bind multiple Mouse events', inject(function($compile, $state, $timeout) {
         expect($state.current.name).toEqual('top');
 
-        el = angular.element('<a ui-state="state" ui-state-opts="{ event: [\'mouseover\', \'mousedown\'] }">');
+        el = angular.element('<a ui-state="state" ui-state-opts="{ events: [\'mouseover\', \'mousedown\'] }">');
 
         scope.state = 'contacts';
         $compile(el)(scope);
@@ -703,7 +703,7 @@ describe('uiStateRef', function() {
     }));
 
     it('should bind single HTML events', inject(function($rootScope, $compile, $state, $timeout) {
-      el = angular.element('<input type="text" ui-sref="contacts" ui-sref-opts="{ event: [\'change\'] }">');
+      el = angular.element('<input type="text" ui-sref="contacts" ui-sref-opts="{ events: [\'change\'] }">');
       $compile(el)($rootScope);
       $rootScope.$digest();
 
@@ -716,7 +716,7 @@ describe('uiStateRef', function() {
     }));
 
     it('should bind multiple HTML events', inject(function($rootScope, $compile, $state, $timeout) {
-      el = angular.element('<input type="text" ui-sref="contacts" ui-sref-opts="{ event: [\'change\', \'blur\'] }">');
+      el = angular.element('<input type="text" ui-sref="contacts" ui-sref-opts="{ events: [\'change\', \'blur\'] }">');
       $compile(el)($rootScope);
       $rootScope.$digest();
 
@@ -737,7 +737,7 @@ describe('uiStateRef', function() {
     }));
 
     it('should bind multiple Mouse events', inject(function($rootScope, $compile, $state, $timeout) {
-      el = angular.element('<a ui-sref="contacts" ui-sref-opts="{ event: [\'mouseover\', \'mousedown\'] }">');
+      el = angular.element('<a ui-sref="contacts" ui-sref-opts="{ events: [\'mouseover\', \'mousedown\'] }">');
       $compile(el)($rootScope);
       $rootScope.$digest();