¿Cómo puedo aplicar un estilo CSS a un elemento ng-repeat dentro de una directiva, según $scope.$watch en su atributo?

Mi código de vista:

<div ng-repeat = "i in items track by $index">
   <myDirective label = "i.labels"> </myDirective>
</div>

Partes del código de la directiva:

return {
  scope : {
    label : '='
  }
  link : function($scope, elem, attrs){
     $scope.$watch('label', function(v){
        if(v[1] == "somevalue"){ // apply a css style to this ng-repeat item.}
     });
  }

}

Quiero aplicar un estilo css al elemento actual basado en v[1]. ¿Cuál es la "forma angular" de lograr esto? dentro de una directiva?

preguntado el 12 de febrero de 14 a las 08:02

Eche un vistazo aquí para el enlace de datos en una directiva stackoverflow.com/questions/13294507/…, solo usa estilo y no valor -

@ Johnny000: ¿Hay algún problema con la forma en que estoy logrando el enlace de datos anterior? -

No sé por qué quiere usar reloj, pero si realmente no lo necesita, intente evitar usar $ reloj ya que no es bueno para el rendimiento. angular-tips.com/blog/2013/08/removing-the-unneeded-watches -

2 Respuestas

No tiene que cambiar el estilo desde dentro de la directiva en su ejemplo. Simplemente podrías hacer algo como:

<div ng-repeat="i in items track by $index" 
     ng-style="{ background: i.labels[1] == 'somevalue' ? 'red' : 'blue' }">
   <myDirective label="i.labels"></myDirective>
</div>

Pero si realmente desea cambiar el estilo de la directiva, entonces, en mi opinión, debe colocar el div externo dentro de la vista de la directiva. De esa manera, puedes manipularlo fácilmente.

Respondido 12 Feb 14, 08:02

¿Las expresiones angulares admiten operaciones ternarias? - amal antonio

no lo hacen, tienes que hacer i.labels[1] == 'somevalue' && 'red' || 'azul' - doodeec

Lo hacen desde Angular 1.1.5. - alon gubkin

@AlonGubkin, conozco esta técnica. Mi pregunta era específica para las directivas angulares. Gracias nunca menos. - amal antonio

Dentro de la directiva puedes usar jqLite selectores para encontrar padres ng-repeat división Luego puede aplicar una clase específica si se cumple la condición deseada.

He creado la siguiente aplicación de muestra.

aplicación.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [{
    labels: ["red", "black"]
  }, {
    labels: ["faint-green", "green"]
  }, {
    labels: ["pink", "orange"]
  }, {
    labels: ["USA"]
  }];
}).directive('mydirective', function() {
  return {
    restrict: 'AE',
    scope: {
      label: '='
    },

    link: function($scope, elem, attrs) {
      $scope.repeatingElem = $(elem).parent('div[ng-repeat]');
      $scope.$watch('label', function(v) {

        if (v[1] == "green") {
          // apply a css class to ng-repeat element.
          $scope.repeatingElem.addClass('bg-success');
        }

      });
    }
  }
});

index.html

<!doctype html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>
    document.write("<base href=\"" + document.location + "\" />");
  </script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <div ng-repeat="i in items">
    <mydirective label="i.labels"></mydirective> {{i.labels}}
  </div>

</body>

</html>

Muestra de plnkr

respondido 28 nov., 15:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.