Added tests and example for Rating component

Author: akserg

lib/rating/rating.dart

@@ -3,6 +3,7 @@
 // All rights reserved.  Please see the LICENSE.md file.
 library angular.ui.rating;
 
+import 'dart:html' as dom;
 import 'package:angular/angular.dart';
 
 import 'package:angular_ui/utils/extend.dart';
@@ -26,57 +27,58 @@ class RatingConfig {
 }
 
 @NgComponent(
-    selector: 'rating',
+    selector: 'rating[ng-model]',
     publishAs: 'ctrl',
     templateUrl: 'packages/angular_ui/rating/rating.html',
     applyAuthorStyles: true
 )
 @NgComponent(
-    selector: '[rating]',
+    selector: '[rating][ng-model]',
     publishAs: 'ctrl',
     templateUrl: 'packages/angular_ui/rating/rating.html',
     applyAuthorStyles: true
 )
-class RatingComponent implements NgAttachAware {
-  final Scope _scope;
-  final RatingConfig _config;
-
-  int _max; // could be restored to simple field after #431 is fixed (after 0.9.5+2) - see also attach below
-  //@NgOneWay('max') int max;
-  @NgOneWay('max') set max(int value) {
-    print('Max: $value');
-    _max = value;
-    attachTmp();
-  }
-  int get max => _max;
-
-  int _value = 0;
-  @NgTwoWay('value') int get value => _value;
-  set value(int val) {
-    _value = val;
-    reset();
-  }
-  @NgTwoWay('readonly') bool isReadonly = false;
-  @NgCallback('on-hover') var onHover;
-  @NgCallback('on-leave') var onLeave;
-  @NgTwoWay('rating-states') List<Map<String,String>> ratingStates;
-  @NgTwoWay('state-on') String stateOn;
-  @NgTwoWay('state-off') String stateOff;
-
+class RatingComponent {
+  
+  int maxRange = 0;
+  String stateOn;
+  String stateOff;
+  List<Map<String, String>> range;
   int val = 0;
-  List<Map> range;
-
-  RatingComponent(this._scope, this._config ) {
-    _log.fine('RatingComponent');
+  
+  @NgOneWay('readonly')
+  bool readonly = false;
+  
+  @NgCallback('on-hover')
+  var onHover;
+  
+  @NgCallback('on-leave')
+  var onLeave;
+  
+  Scope _scope;
+  dom.Element _element;
+  NodeAttrs _attrs;
+  NgModel _ngModel;
+  RatingConfig _ratingConfig;
+  
+  RatingComponent(this._scope, this._element, this._attrs, this._ngModel, this._ratingConfig) {
+    maxRange = _attrs.containsKey('max') ? _scope.parentScope.eval(_attrs['max']) : _ratingConfig.max;
+    stateOn = _attrs.containsKey('state-on') ? _scope.parentScope.eval(_attrs['state-on']) : _ratingConfig.stateOn;
+    stateOff = _attrs.containsKey('state-off') ? _scope.parentScope.eval(_attrs['state-off']) : _ratingConfig.stateOff;
+    
+    _ngModel.render = (value) {
+      val = _ngModel.viewValue;
+    };
+    range = _buildTemplateObjects(_attrs.containsKey('rating-states') ? _scope.parentScope.eval(_attrs['rating-states']) : new List(maxRange));
   }
-
-  List<Map<String,String>> createRateObjects(List<Map<String,String>> states) {
+  
+  List _buildTemplateObjects(List<Map<String, String>>states) {
     Map<String,String> defaultOptions =
       {
         'stateOn': this.stateOn,
         'stateOff': this.stateOff
       };
-
+  
     if(states != null) {
       for (int i = 0, n = states.length; i < n; i++) {
         while(states.length <= i) {
@@ -87,49 +89,31 @@ class RatingComponent implements NgAttachAware {
     }
     return states;
   }
-
-  void rate (int value) {
-    if(this.value != value && !isReadonly) {
-      this.value = value;
+  
+  void rate(value) {
+    if (!readonly ) {
+      _ngModel.viewValue = value;
+      _ngModel.render(_ngModel.modelValue);
     }
   }
-
-  void enter(int value) {
-    if(!isReadonly) {
-      this.val = value;
+  
+  void enter(value) {
+    if (!readonly) {
+      val = value;
     }
     onHover({'value': value});
   }
-
+  
   void reset() {
-    val = value;
+    val = _ngModel.viewValue;
     onLeave();
   }
-
-  String stateClass(int index, Map r) {
-    String c;
-    if(index < val) {
-      c = (r['stateOn'] != null) ? r['stateOn'] : 'glyphicon-star';
+  
+  String stateClass(index, Map<String, String> r) {
+    if (index < val) {
+      return r.containsKey('stateOn') && r['stateOn'] != null ? r['stateOn'] : 'glyphicon-star';
     } else {
-      c = (r['stateOff'] != null) ? r['stateOff'] : 'glyphicon-star-empty';
+      return r.containsKey('stateOff') && r['stateOff'] != null ? r['stateOff'] : 'glyphicon-star-empty';
     }
-    return c;
-  }
-
-  void attachTmp() { // move content back to attach when bug #431 is fixed (after 0.9.5+2)
-    _log.fine('Max: $max');
-    int maxRange = max != null ? max : _config.max;
-    stateOn = stateOn != null ? stateOn : _config.stateOn;
-    stateOff = stateOff != null ? stateOff : _config.stateOff;
-
-    range = ratingStates != null ?
-        createRateObjects(copy(ratingStates)) :
-          this.createRateObjects(new List(maxRange));
-    reset();
-
-    //_scope.$watch(() => value, reset);
-
-  }
-  void attach() {
   }
 }

lib/rating/rating.html

@@ -1,4 +1,4 @@
 <!DOCTYPE html>
-<span ng-mouseleave="ctrl.reset()">
-  <i ng-repeat="r in ctrl.range" ng-mouseenter="ctrl.enter($index + 1)" ng-click="ctrl.rate($index + 1)" class="glyphicon" ng-class="ctrl.stateClass($index, r)"></i>
-</span>
+<span ng-mouseleave="ctrl.reset()" ng-mouseout="ctrl.reset()">
+  <i ng-repeat="r in ctrl.range" ng-mouseenter="ctrl.enter($index + 1)" ng-mouseover="ctrl.enter($index + 1)" ng-click="ctrl.rate($index + 1)" class="glyphicon" ng-class="ctrl.stateClass($index, r)"></i>
+</span>