3

Estoy trabajando con una directiva como la siguiente:

ctrlsaldosyconsumos.directive('valCustom', function() {
    return function(scope,element,attrs){
       attrs.$observe('valCustom',function(){
        var percent = '<div class=\"percent\"></div>';
        element.append(percent);
        element.find('.percent').css( {'background': element.attr("data-color")});
        element.find('.percent').animate({width: element.attr("data-percent") + '%'}, 350);

        var divvalue = $("<span class=\"txt\">"+dataValue+"</span>");
        element.append(divvalue);
        element.find('.txt').animate({'left': element.attr("data-percent")+'%', opacity: 1}); 
       });
    }

})

Y por parte del html tengo las siguientes etiquetas:

<tr ng-repeat="internetPrincipal in internetListaBolsaPrincipalInternet">
    <td width="30%">{{internetPrincipal.nombreBolsa}}</td>
    <td>
        <div class="progress-bar" data-color="#d52b1e" 
                                        data-percent="{{internetPrincipal.bolsaUtilizada*100/internetPrincipal.bolsaTotal}}" data-value="{{internetPrincipal.bolsaUtilizada}}" val-Custom>
        </div>
    </td>
</tr>

Ahora lo que necesito es pasar 2 parámetros a la directiva. En este caso sería "internetPrincipal.bolsaUtilizada" y "internetPrincipal.unidadConsumo" que lo obtengo del ng-repeat.

Estos parámetros deberían ir, por ejemplo

val-Custom="{{internetPrincipal.bolsaUtilizada,internetPrincipal.unidadConsumo}}"

Pero esto me da un error.

2
  • 1
    Por que no haces que tu directiva se ocupe de la plantilla y te genere las barras de progreso. Me parece que es una implementación muy rebuscada para un problema muy sencillo.
    – devconcept
    Commented el 27 sept. 2016 a las 16:52
  • 1
    Echale un vistazo a angular-ui.github.io/bootstrap/#/progressbar
    – devconcept
    Commented el 17 oct. 2016 a las 21:48

2 respuestas 2

3

Necesitas crear un scope para esa directiva, de esta forma:

ctrlsaldosyconsumos.directive('valCustom', function() {
    return {
        scope: {
            param1: '=',
            param2: '='
        },
        link: function(scope,element,attrs){
          attrs.$observe('valCustom',function(){
            var percent = '<div class=\"percent\"></div>';
            element.append(percent);
            element.find('.percent').css( {'background': element.attr("data-color")});
            element.find('.percent').animate({width: element.attr("data-percent") + '%'}, 350);

            var divvalue = $("<span class=\"txt\">"+dataValue+"</span>");
            element.append(divvalue);
            element.find('.txt').animate({'left': element.attr("data-percent")+'%', opacity: 1}); 
          });
    }
})

Fijate que ahora devuelves un objeto con scope y una función link, que es el postlink, quiere decir que esa función se ejecuta al instanciarse la directiva (cuando Angular la lee de un template que está generando). Los atributos de scope pueden ser '=' -> paso por referencia o '?' -> paso por valor, el = te sirve para objetos y el ? lo usas para primitivas, por ejemplo un string.

Desde el html tu etiquera quedaría así:

<div class="progress-bar" data-color="#d52b1e" 
  data-percent="{{internetPrincipal.bolsaUtilizada*100/internetPrincipal.bolsaTotal}}"
  data-value="{{internetPrincipal.bolsaUtilizada}}"
  val-Custom data-param1="miparametro1" data-param2="miparametro2">
        </div>

Si los parámetros que quieres pasar estan en el scope pués en vez de "miparametro1" pones "laVariableDelScope".

Espero que haya quedado claro.

2

Puedes guardar esos parametros como atributo al elemento donde esta la directiva y en tu directiva, los lees los parametros:

angular.module("app",[])
.directive("test", function(){
  
  return {
    retrict:"A",
    link:function($scope, $element, $attrs){     
      console.log("Parametros en la directiva test:" + $attrs.param1 + "," + $attrs.param2);
      
    }
    
  }
  
})
.controller("ctrl", function($scope){
  $scope.list = [{username:"einer", id: 44},{username:"einer1", id: 33}];
})
<div ng-app="app" ng-controller="ctrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div
ng-repeat="item in list"
test data-param1="{{item.username}}" data-param2="{{item.id}}">
{{item.id}} - {{item.username}}</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.