ngstyle - Vincular variables AngularJS en sintaxis CSS

ngstyle example angularjs

Question

Estoy tratando de averiguar cómo enlazar las vars de AngularJS con la sintaxis CSS. Creo que el problema está en las llaves. Esto es lo que básicamente estoy tratando de hacer:

<style>.css_class {background:{{ angular_variable }}; color:#ffffff;}</style>
<style>.css_rule {background:{{ "#000000" }}; color:#ffffff;}</style>
<style>.css_rule {background:{{ var | someFilter }}; color:#ffffff;}</style>

¿Alguna idea sobre cómo se podría lograr esto? ¡Gracias!

Answer 1

¡No puedo entender por qué quieres usar esta idea! U debe usar ng-class para eso!

Por ejemplo:

<p ng-class="{strike: strike, bold: bold, red: red}">Map Senter code hereyntax Example</p>

Answer 2

Como se explica here angular no se ejecuta en el contenido dentro de las etiquetas de estilo. Hay una solución alternativa en esa publicación, pero como un enfoque más flexible, crearía una directiva que capture los contenidos, los analice y reemplace:

Respuesta actualizada

app.directive(''parseStyle'', function($interpolate) {
return function(scope, elem) {
var exp = $interpolate(elem.html()),
watchFunc = function () { return exp(scope); };
scope.$watch(watchFunc, function (html) {
elem.html(html);
});
};
});

Uso:

<style parse-style>.css_class {color: {{ angular_variable }};}</style>

http://jsfiddle.net/VUeGG/31/

Respuesta original

app.directive(''parseStyle'', function()
{
return function(scope, elem)
{
elem.html(scope.$eval(''/''' + elem.html() + ''/'''));
};
});

entonces:

<style parse-style>.css_class {color: '' + angular_variable + '';}</style>

Aunque no estoy seguro de la compatibilidad del navegador para esto.

http://jsfiddle.net/VUeGG/4/

Answer 3

No debería necesitar las llaves, ya que éstas se están evaluando dentro de la directiva html: solo necesita usar las llaves si tiene una expresión que se evalúa fuera de ellas, es decir;

<p ng-class="some-angular-variable">
{{some-angular-variable}}
</p> 

En su situación, eliminar las llaves dobles y usar comillas dobles debería resolver el problema.

Dejando de lado, Chandermani está a favor del dinero: lo que usted está tratando de lograr se logra mejor con la directiva de la clase ng. Su uso permitirá aplicar una clase (o varias) a la etiqueta correspondiente.

es decir;

<p ng-class="mystyle">
some text
</p>

Digamos que tienes dos clases: style1 y style2.

Puede seleccionar el que desee aplicar con

scope.mystyle = "style1" // or whatever

en su controlador

Answer 4

Actualizar

He creado un "complemento" Angular (módulo + filtros + fábrica) llamado ngCss que se encarga de esto y mucho más: ¡ échale un vistazo !

También he hecho una versión de Javascript de vainilla (por ejemplo, sin dependencias externas) también; CjsSS.js ( GitHub ).

ngCss es un pequeño * Módulo Angular + Fábrica + Filtros que permite el enlace de cadenas y objetos (incluidos los objetos anidados) dentro de CSS. * Minified + script comprimido bajo 1.700 bytes

caracteristicas:

• CSS se puede enlazar en tiempo real (los cambios en $scope son $watch ''ed) o se pueden actualizar a través del $broadcast update event personalizado customCss.
• css y cssInline Filters generan objects Javascript / JSON como CSS para habilitar los mixins, incluida la capacidad de anidar objects .
• $scope se puede inicializar dentro del propio CSS, lo que permite que toda la información relacionada con CSS se coloque dentro del elemento * .css o STYLE.
• $scope se puede aislar o importar desde cualquier $element Angular $element (a través de angular.element($element).scope() ).

Gracias originales al código de @jonnyynnoj, he descubierto una manera de mantener la nomenclatura {{angular_variable}} dentro de las etiquetas de estilo, así como también el enlace en vivo de cualquier cambio. Echa un vistazo a la bifurcación del código de @jonnyynnoj para ver un ejemplo simple o mira a continuación lo que estoy usando en mis aplicaciones:

(function (ngApp) {
''use strict'';
//# Live bind a <style cn-styler="{ commented: true, usingSingleQuote: true }" /> tag with {{ngVars}}
ngApp.directive(''cnStyler'', function () {
return {
//# .restrict the directive to attribute only (e.g.: <style cn-styler>...</style>)
restrict: "A",
link: function ($scope, $element, $attrs, controllers) {
//# .$eval the in-line .options and setup the updateCSS function
//# NOTE: The expected string value of the inline options specifies a JSON/JavaScript object, hence the `|| {}` logic
var css, regEx,
options = $scope.$eval($attrs["cnStyler"]) || {},
updateCSS = function () {
//# .$eval the css, replacing the results back into our $element''s .html
$element.html($scope.$eval(css));
}
;
//# Setup the .quote and the inverse in .unquote (which we use to process the css)
//# NOTE: In theory, the .unquote should not be present within the css
options.quote = (options.usingSingleQuote !== false ? "''" : ''"'');
options.unquote = (options.quote === ''"'' ? "''" : ''"'');
regEx = new RegExp(options.unquote, "g");
//# Process the $element''s .html into css, .replace''ing any present .unquote''s with .quote''s (this could cause problems), then the {{Angular}} (or /*{{Angular}}*/) variables with '' + stringified_versions + ''
if (options.commented !== false) {
css = options.unquote + ($element.html() + '''')
.replace(regEx, options.quote)
.replace(////*{{/g, options.unquote + "+")
.replace(/}}/*///g, "+" + options.unquote)
+ options.unquote;
} else {
css = options.unquote + ($element.html() + '''')
.replace(regEx, options.quote)
.replace(/{{/g, options.unquote + "+")
.replace(/}}/g, "+" + options.unquote)
+ options.unquote;
}
//# .$watch for any changes in the $scope, calling our updateCSS function when they occur
$scope.$watch(updateCSS);
}
};
});
})(YOUR_NG_APP_VAR_HERE);

Entonces usas esta directiva así:

<style cn-styler type="text/css">
.myClass{
color: /*{{themeColor}}*/;
}
</style>

Donde ha establecido $scope.themeColor en algún lugar de su controlador y ha reemplazado YOUR_NG_APP_VAR_HERE con su variable ngApp .

NOTAS:

Asegúrese de que su ng-controller esté definido con el alcance de la etiqueta <style> ya que las etiquetas <style> deben estar en <head> mientras que ng-controller generalmente se define en la etiqueta <body> o más abajo. TL; DR: ponga su ng-controller en su etiqueta <html> forma:

<html ng-app="YOUR_NG_APP_VAR_HERE" ng-controller="MyNgController">

Debido al análisis de CSS y al formateo automático en herramientas como Visual Studio , agregué la función para tener las vars {{Angular}} dentro de los comentarios de CSS (por ejemplo, /*{{Angular}}*/ ). Este es el comportamiento predeterminado de la directiva, a menos que la anule así:

<style cn-styler="{commented: false}" >...</style>

Debido a la naturaleza de esta solución (el CSS está evaluado como una cadena con variables insertadas), también se debe procesar la presencia de comillas simples o dobles dentro del CSS. De manera predeterminada, la directiva asume que está utilizando comillas simples ('') dentro de su CSS, lo que significa que para evitar cualquier error introducido , solo debe usar comillas simples dentro de su CSS, ya que cualquier comilla doble presente en el CSS se reemplazará con comillas simples. Puede anular este comportamiento predeterminado (lo que significa que está utilizando comillas dobles en su CSS) de la siguiente manera:

<style cn-styler="{usingSingleQuote: false}" >...</style>

Hay casos de borde en los que la sustitución de comillas dobles por comillas simples complica el CSS (como en el content ), por lo que usted querrá asegurarse de que solo está usando un estilo de comillas en su CSS (y señala la directiva en consecuencia) para Evite cualquier problema potencial. Afortunadamente, las citas rara vez se usan en CSS, por lo que esto no es un problema.