Связать переменные AngularJS с синтаксисом CSS

Ответ 1

Как объяснено здесь angular не запускается в содержимом внутри тегов стиля. В этой статье есть обходное решение, но в качестве более гибкого подхода я просто создаю директиву, которая захватывает содержимое, анализирует их и заменяет:

Обновленный ответ

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);
        });
    };
});

Использование:

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

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

Оригинальный ответ

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

то

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

Не уверен в поддержке браузера для этого.

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

Ответ 2

Обновление

Я собрал плагин Angular "(модуль + фильтры + factory) , называемый ngCss, который обрабатывает это и многое другое - проверить его!

Я также сделал версию Vanilla Javascript (например, никаких внешних зависимостей); CjsSS.js ( GitHub).

ngCss - это маленький * Angular модуль + Factory + фильтры, который позволяет связывать строки и объекты (включая вложенные объекты) внутри CSS. * Minified + сжатый script до 1,700 байт

Особенности:

• CSS может быть связан с проживанием (изменения в $scope являются $watch 'ed) или обновлены с помощью настраиваемого события $broadcast eventCss.
• css и cssInline Фильтры выводят Javascript/JSON objects как CSS для включения миксинов, включая возможность вложенности objects.
• $scope может быть инициализирован в самом CSS, позволяя размещать всю связанную с CSS информацию в элементе *.css или STYLE.
• $scope можно изолировать или импортировать из любого Angular $element (через angular.element($element).scope()).

Оригинал Благодаря @jonnyynnoj коду я выяснил способ сохранить номенклатуру {{angular_variable}} в тегах стиля, а также привязать к ним любые изменения. Посмотрите на вилку @jonnyynnoj code для простого примера или посмотрите ниже, что я использую в своих приложениях:

(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 .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 .html into css, .replace'ing any present .unquote with .quote (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);

Затем вы используете эту директиву следующим образом:

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

Где вы установили $scope.themeColor где-то в своем контроллере, и вы заменили YOUR_NG_APP_VAR_HERE своей переменной ngApp.

ПРИМЕЧАНИЯ:

Убедитесь, что ваш ng-controller определяется с областью действия тегом <style>, поскольку тег <style> должен находиться в <head>, тогда как ng-controller обычно определяется тегом <body> или ниже. TL; DR: Поместите свой ng-controller в свой тег <html> так:

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

Из-за синтаксического анализа и автоматического форматирования CSS в таких инструментах, как Visual Studio, я добавил эту функцию, чтобы иметь {{Angular}} vars в комментариях CSS (например, /*{{Angular}}*/). Это поведение по умолчанию по умолчанию, если вы не переопределили его так:

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

В связи с природой этого решения (CSS .$eval, как строка с включенными переменными), необходимо также использовать присутствие одиночных или двойных кавычек в CSS. По умолчанию в директиве предполагается, что вы используете одиночные кавычки (') в своем CSS, что означает, что во избежание любых введенных ошибок вам следует использовать только одиночные кавычки в CSS, как любые двойные кавычки, присутствующие в CSS будут заменены одинарными кавычками. Вы можете переопределить это поведение по умолчанию (это означает, что вы используете двойные кавычки в своем CSS):

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

Существуют граничные случаи, когда замена двойных кавычек одиночными кавычками закручивает CSS (например, в content), поэтому вы хотите убедиться, что используете только один стиль кавычек в своем CSS (и сигнализацию соответственно), чтобы избежать возможных проблем. К счастью, кавычки редко используются в CSS, поэтому это в основном не проблема.

Ответ 3

Вам не нужны фигурные скобки, поскольку они оцениваются внутри директивы html - вам нужно всего лишь использовать фигурные скобки, если у вас есть выражение, которое оценивается вне их, т.е.

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

В вашей ситуации удаление двухлепестковых фигурных скобок и использование двойных кавычек должно решить проблему.

Как в стороне, Чандермани на деньги - то, что вы пытаетесь, лучше выполнить с директивой ng-class. Использование этого метода позволит применить класс (или несколько) к соответствующему тегу.

т

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

скажем, у вас есть два класса style1 и style2

Вы можете выбрать тот, который будет применяться с помощью

scope.mystyle = "style1" // or whatever

в вашем контроллере.

Ответ 4

Я не могу понять, почему вы хотите использовать эту идею! U должен использовать для этого ng-класс!

Например:

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