Bind ui-sref to DOM events

Author: cristHian Gz

src/stateDirectives.js

@@ -145,9 +145,18 @@ function $StateRefDirective($state, $timeout) {
 
       if (!type.clickable) return;
       hookFn = clickHook(element, $state, $timeout, type, function() { return def; });
-      element[element.on ? 'on' : 'bind']("click", hookFn);
+
+      var htmlEvent = isArray(def.options.event) ? def.options.event : ['click'];
+      var on = element.on ? 'on' : 'bind';
+      for (var i = 0; i < htmlEvent.length; i++) {
+        element[on](htmlEvent[i], hookFn);
+      }
+
       scope.$on('$destroy', function() {
-        element[element.off ? 'off' : 'unbind']("click", hookFn);
+        var off = element.off ? 'off' : 'unbind';
+        for (var i = 0; i < htmlEvent.length; i++) {
+          element[off](htmlEvent[i], hookFn);
+        }
       });
     }
   };

test/stateDirectivesSpec.js

@@ -141,7 +141,7 @@ describe('uiStateRef', function() {
         ctrlKey:  undefined,
         shiftKey: undefined,
         altKey:   undefined,
-        button:   undefined 
+        button:   undefined
       });
       timeoutFlush();
       $q.flush();
@@ -156,7 +156,7 @@ describe('uiStateRef', function() {
 
       timeoutFlush();
       $q.flush();
-      
+
       expect($state.current.name).toEqual('top');
       expect($stateParams).toEqualData({ });
     }));
@@ -222,7 +222,7 @@ describe('uiStateRef', function() {
 
     it('should allow passing params to current state', inject(function($compile, $rootScope, $state) {
       $state.current.name = 'contacts.item.detail';
-      
+
       el = angular.element("<a ui-sref=\"{id: $index}\">Details</a>");
       $rootScope.$index = 3;
       $rootScope.$apply();
@@ -231,10 +231,10 @@ describe('uiStateRef', function() {
       $rootScope.$digest();
       expect(el.attr('href')).toBe('#/contacts/3');
     }));
-    
+
     it('should allow multi-line attribute values when passing params to current state', inject(function($compile, $rootScope, $state) {
       $state.current.name = 'contacts.item.detail';
-      
+
       el = angular.element("<a ui-sref=\"{\n\tid: $index\n}\">Details</a>");
       $rootScope.$index = 3;
       $rootScope.$apply();
@@ -460,6 +460,37 @@ describe('uiStateRef', function() {
       expect($state.$current.name).toBe("contacts");
     }));
   });
+
+  describe('DOM event bind to ui-sref', function() {
+
+    it('should bind click event by default', inject(function($rootScope, $compile, $state, $timeout) {
+      el = angular.element('<a ui-sref="contacts"></a>');
+      template = $compile(el)($rootScope);
+      $rootScope.$digest();
+
+      expect($state.current.name).toEqual('top');
+
+      triggerClick(el);
+      $timeout.flush();
+
+      expect($state.current.name).toEqual('contacts');
+    }));
+
+    it('should bind events from ui-sref-opts', inject(function($rootScope, $compile, $state, $timeout) {
+      el = angular.element('<input type="text" ui-sref="contacts" ui-sref-opts="{ event: [\'change\'] }">');
+      template = $compile(el)($rootScope);
+      $rootScope.$digest();
+
+      expect($state.current.name).toEqual('top');
+
+      var change = document.createEvent("HTMLEvents");
+      change.initEvent("change", false, true);
+      el[0].dispatchEvent(change);
+      $timeout.flush();
+
+      expect($state.current.name).toEqual('contacts');
+    }));
+  });
 });
 
 describe('uiSrefActive', function() {