16

AngularJS スコープ変数を CSS 構文にバインドする方法を理解しようとしています。問題は中括弧にあると思います。これが私が基本的にやろうとしていることです：

<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>

これをどのように達成できるかについてのアイデアはありますか? ありがとうございました！

4

4 に答える 4

3

アップデート

これを処理するngCss と呼ばれるAngular の「プラグイン」(モジュール + フィルター + ファクトリー)をまとめました。

また、Vanilla Javascript (たとえば、外部依存関係なし) バージョンも作成しました。CjsSS.js ( GitHub )。

ngCssは、CSS 内の文字列とオブジェクト (ネストされたオブジェクトを含む) のバインドを可能にする小さな* Angular Module+Factory+Filters です。*1,700バイト未満の縮小+圧縮されたスクリプト

特徴：

  • CSS は、ライブ バインド (の変更$scopeは$watch'ed) またはカスタム$broadcastイベント updateCss を介して更新できます。
  • css および cssInline フィルターは、Javascript/JSONobjectsを CSS として出力し、ネストする機能を含むミックスインを有効にしますobjects。
  • $scopeCSS 自体内で初期化できるため、すべての CSS 関連情報を *.css または STYLE 要素内に配置できます。
  • $scope任意の Angular から$element( 経由でangular.element($element).scope()) 分離またはインポートできます。

オリジナル @jonnyynnoj のコードのおかげで、{{angular_variable}}命名法をスタイル タグ内に保持し、変更をライブ バインディングする方法を見つけました。簡単な例については、@jonnyynnoj のコードのフォークを確認するか、アプリで使用しているものを以下で確認してください。

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

次に、このディレクティブを次のように使用します。

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

$scope.themeColorコントローラーのどこかに設定YOUR_NG_APP_VAR_HEREし、ngApp変数に置き換えた場所。

ノート：

タグは通常、タグまたはその下で定義されている必要があるため、タグのng-controllerスコープで定義されていることを確認してください。TL;DR: 次のようにタグを付けます。<style><style><head>ng-controller<body>ng-controller<html>

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

Visual Studioなどのツールでの CSS の解析と自動書式設定のために、 {{Angular}}CSS コメント内に変数を含める機能を追加しました(例: /*{{Angular}}*/)。次のようにオーバーライドしない限り、これはディレクティブのデフォルトの動作です。

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

このソリューションの性質上 (CSS は.$eval、変数が挿入された文字列として使用されます)、CSS 内の一重引用符または二重引用符の存在も処理する必要があります。デフォルトでは、ディレクティブは、CSS 内で一重引用符 (') を使用していることを前提としています。つまり、導入されたエラーを回避するために、 CSS 内では一重引用符のみを使用する必要があります。CSS内に存在する二重引用符は一重引用符に置き換えられます。次のように、このデフォルトの動作 (CSS 内で二重引用符を使用していることを意味します) をオーバーライドできます。

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

二重引用符を一重引用符に置き換えると CSS が台無しになるエッジ ケースがあるため ( などcontent)、CSS で 1 つのスタイルの引用符のみを使用していること (およびそれに応じてディレクティブを通知すること) を回避する必要があります。潜在的な問題。ありがたいことに、引用符が CSS で使用されることはめったにないため、これはほとんど問題になりません。

于 2014-10-03T02:27:45.270 に答える
0

なぜこのアイデアを使いたいのか理解できません！そのためには ng-class を使用する必要があります。

例えば：

<p ng-class="{strike: strike, bold: bold, red: red}">Map Senter code hereyntax Example</p>
于 2013-08-15T08:26:55.213 に答える