08 directiva valoracion con estrellitas

08-directivas/app.js

@@ -1,5 +1,5 @@
 // tenemos que agregar la dependencia hacia el nuevo módulo de directivas
-angular.module('cashFlow', ['ui.router', 'abFiltros' , 'abComponentes']);
+angular.module('cashFlow', ['ui.router', 'abFiltros' , 'abComponentes', 'abDirectivas', 'abValoracion']);
 
 angular.module('cashFlow').config(function ($stateProvider) {
 	$stateProvider

08-directivas/index.html

@@ -30,8 +30,10 @@
 	<script src="maestrosService.js"></script>
 	<script src="movimientosFactory.js"></script>
 	<script src="filtros.js"></script>
-	<!-- Incluir los fichero dónde se han programado las directivas-->
+	<!-- Incluir los fichero donde se han programado las directivas-->
 	<script src="componentes.js"></script>
+	<script src="directivas.js"></script>
+	<script src="valoracion.js"></script>
 </body>
 
 </html>

08-directivas/lista.html

@@ -20,9 +20,11 @@
 			<!-- Sustituimos el contenido de cada fila por un componente -->
 			<tr ng-repeat="movimientoRepeater in caja.movimientos | abGranImporte:caja.valorCorte | filter:caja.valorBuscado | orderBy:caja.campo:caja.sentido"
 			ab-fila-movimiento movimientodirectiva="movimientoRepeater"
+			ab-seleccionado
 			>
 				<!-- El componente abFilaMovimiento recibe un parámetro vía atributos
 				los nombres de las variables pueden ser distintos a nivel de cliente, directiva y plantilla-->
+				<!-- La directiva abSeleccionado cambia el fondo cuando el ratón está encima-->
 			</tr>
 		</tbody>
 	</table>

08-directivas/nuevo.html

@@ -39,6 +39,25 @@
                         </div>
                     </div>
                 </div>
+                <div class="row-fluid">
+				<div class="col-xs-12 col-sm-6">
+					<div class="control-group">
+						<label class="control-label" for="texto">Texto</label>
+						<div class="controls">
+							<input type="text" name="texto" class="input" ng-model="caja.nuevoMovimiento.texto">
+						</div>
+					</div>
+				</div>
+				<div class="col-xs-12 col-sm-6">
+					<div class="control-group">
+						<label class="control-label" for="valoracion">Valoración</label>
+						<div class="controls">
+                            <!--Uso de la directiva abValoracion para solicitar las estrellas de valoración-->
+							<div ab-valoracion valor="caja.nuevoMovimiento.valoracion" max="10" solo-lectura="false"></div>
+						</div>
+					</div>
+				</div>
+			</div>
             </div>
             <div class="text-right">
                 <button style="margin-top: 20px" type="button" class="btn btn-lg btn-primary" ng-click="caja.guardarMovimiento()">

08-directivas/tpl-fila-movimiento.html

@@ -1,4 +1,3 @@
-<td class="text-left"><a ui-sref="movimiento({id:movimientoplantilla.id})">{{movimientoplantilla.id }}</a> </td>
 <td class="text-left">{{movimientoplantilla.fecha | date}}</td>
 <td class="text-left">{{movimientoplantilla.tipo}}</td>
 <td class="text-left">{{movimientoplantilla.categoria}}</td>
@@ -6,5 +5,6 @@
 	{{movimientoplantilla.importe | number:2}} €
 </td>
 <td class="text-left">
+	<!--Uso de la directiva abValoracion para mostrar las estrellas en modo solo lectura-->
 	<ab-valoracion valor="movimientoplantilla.valoracion" max="10" solo-lectura="true"></ab-valoracion>
 </td>

08-directivas/tpl-valoracion.html

@@ -0,0 +1,8 @@
+<span ng-repeat="estrella in valoracion.estrellas" ng-click="valoracion.marcar($index)">
+        <span class="lead"
+                ng-class=
+                "{'text-danger h3': estrella.marcada,
+                'text-muted small': !estrella.marcada}">
+                <b><u>*</u></b>
+        </span>
+</span>

08-directivas/valoracion.js

@@ -0,0 +1,48 @@
+(function () {
+	angular.module('abValoracion', [])
+		.directive('abValoracion', valoracion);
+
+	function valoracion() {
+		return {
+			restrict: 'AE',
+			templateUrl: './tpl-valoracion.html',
+			scope: {
+				valor: '=',
+				max: '@',
+				soloLectura: '@'
+			},
+			bindToController: true,
+			controllerAs: "valoracion",
+			controller: valoracionCtrl
+		}
+	}
+
+	function valoracionCtrl() {
+		var vm = this;
+		/** responde al click en una estrella */
+		vm.marcar = function (indice) {
+			if (vm.soloLectura && vm.soloLectura === 'true') {
+				return;
+			}
+			vm.valor = indice + 1;
+			actualizar();
+		};
+
+		/** para empezar iniciamos los datos según lo recibido en el scope */
+		actualizar();
+
+		/** actualiza los datos para repintar la vista */
+		function actualizar() {
+			if (!vm.valor) vm.valor = 1;
+			vm.estrellas = [];
+			for (var i = 0; i < vm.max; i++) {
+				var estrella = {
+					marcada: (i < vm.valor)
+				};
+				vm.estrellas.push(estrella);
+			}
+		};
+	}
+
+
+}());

0820-directivas/client/tpl-valoracion.html

@@ -1,12 +0,0 @@
-<span>
-    <span
-          ng-repeat="estrella in estrellas"
-          ng-click="marcar($index)" >
-        <span class="lead"
-              ng-class=
-              "{'text-danger h3': estrella.marcada,
-               'text-muted small': !estrella.marcada}">
-            <b><u>*</u></b>
-        </span>
-    </span>
-</span>

0820-directivas/client/valoracion.js

@@ -1,38 +0,0 @@
-(function () {
-    var valoracion = function () {
-        return {
-            restrict: 'AE',
-            templateUrl: '/tpl-valoracion.html',
-            scope: {
-                valor: '=',
-                max: '@',
-                soloLectura: '@'
-            },
-            link: function (scope, elem, attrs) {
-                function actualizar() {
-					if(!scope.valor)scope.valor=1;
-					scope.estrellas = [];
-                    for (var i = 0; i < scope.max; i++) {
-                        var estrella = {
-                            marcada: (i < scope.valor)
-                        };
-                        scope.estrellas.push(estrella);
-                    }
-                };
-
-                scope.marcar = function (indice) {
-                    if (scope.soloLectura && scope.soloLectura === 'true') {
-                        return;
-                    }
-                    scope.valor = indice + 1;
-                    actualizar();
-                };
-                actualizar();
-            }
-        }
-    }
-
-    angular.module('abDirectivas')
-        .directive('abValoracion', valoracion);
-
-}());