feat(rating): added onHover and onLeave.

Author: Sean Desmond

src/rating/docs/demo.html

@@ -1,8 +1,8 @@
 <div ng-controller="RatingDemoCtrl">
-    <rating value="rate" max="10" readonly="isReadonly"></rating>
+    <rating value="rate" max="10" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
 
     <hr/>
-    <pre>Rate: <b>{{rate}}</b>  - Readonly is: <i>{{isReadonly}}</i></pre>
+    <pre>Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
 
     <hr/>
     <button class="btn btn-small btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>

src/rating/docs/demo.js

@@ -1,4 +1,7 @@
 var RatingDemoCtrl = function ($scope) {
   $scope.rate = 7;
   $scope.isReadonly = false;
+  $scope.hoveringOver = function(value) {
+    $scope.overStar = value;
+  };
 };

src/rating/docs/readme.md

@@ -1,3 +1,3 @@
 Rating directive that will take care of visualising a star rating bar.
 
-It also provides optional attribute `max` to vary the number of stars and `readonly` attribute to diasble user's interaction.
+It also provides optional attributes: `max` to vary the number of stars, `readonly` to disable user's interaction, `on-hover` to signal when the user's mouse is over a particular star, and `on-leave` to signal when the mouse leaves the control altogether.

src/rating/rating.js

@@ -8,7 +8,9 @@ angular.module('ui.bootstrap.rating', [])
   return {
     restrict: 'EA',
     scope: {
-      value: '='
+      value: '=',
+      onHover: '&',
+      onLeave: '&'
     },
     templateUrl: 'template/rating/rating.html',
     replace: true,
@@ -31,10 +33,12 @@ angular.module('ui.bootstrap.rating', [])
           if ( ! scope.readonly ) {
               scope.val = value;
           }
+          scope.onHover({value: value});
       };
 
       scope.reset = function() {
           scope.val = angular.copy(scope.value);
+          scope.onLeave();
       };
       scope.reset();
 

src/rating/test/rating.spec.js

@@ -27,7 +27,7 @@ describe('rating directive', function () {
     expect(getState(stars)).toEqual([true, true, true, false, false]);
   });
 
-  it('handles correcty the click event', function() {
+  it('handles correctly the click event', function() {
     var stars = element.find('i');
 
     var star2 = stars.eq(1);
@@ -43,7 +43,7 @@ describe('rating directive', function () {
     expect($rootScope.rate).toBe(5);
   });
 
-  it('handles correcty the hover event', function() {
+  it('handles correctly the hover event', function() {
     var stars = element.find('i');
 
     var star2 = stars.eq(1);
@@ -99,6 +99,28 @@ describe('rating directive', function () {
     expect(getState(stars)).toEqual([true, true, true, true, true]);
   });
 
+  it('should fire onHover', function() {
+    $rootScope.hoveringOver = jasmine.createSpy('hoveringOver');
+
+    element = $compile('<rating value="rate" on-hover="hoveringOver(value)"></rating>')($rootScope);
+    $rootScope.$digest();
+
+    var star3 = element.find('i').eq(2);
+    star3.trigger('mouseover');
+    $rootScope.$digest();
+    expect($rootScope.hoveringOver).toHaveBeenCalledWith(3);
+  });
+
+  it('should fire onLeave', function() {
+    $rootScope.leaving = jasmine.createSpy('leaving');
+
+    element = $compile('<rating value="rate" on-leave="leaving()"></rating>')($rootScope);
+    $rootScope.$digest();
+
+    element.trigger('mouseleave');
+    $rootScope.$digest();
+    expect($rootScope.leaving).toHaveBeenCalled();
+  });
 });
 
 describe('setting ratingConfig', function() {
@@ -123,6 +145,4 @@ describe('setting ratingConfig', function() {
   it('should change number of icon elements', function () {
     expect(element.find('i').length).toBe(10);
   });
-
-});
-
+});

template/rating/rating.html

@@ -1,3 +1,3 @@
 <span ng-mouseleave="reset()">
 	<i ng-repeat="number in range" ng-mouseenter="enter(number)" ng-click="rate(number)" ng-class="{'icon-star': number <= val, 'icon-star-empty': number > val}"></i>
-</span>
+</span>