web-dev-qa-db-ja.com

AngularJSでディレクティブのスタイルを操作する方法は？

AngularJSおよびAngularJSディレクティブを使用してコンポーネントを作成しています。

私はこのようなことをしています：

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

MyApp.directive('myTag', function() {
    return { /* Some logic here*/ }
});

コンポーネントのスタイルを（CSSを使用して）次のように変更できるようにしたい：

<my-tag class="MyClass"></my-tag>

これに加えて、コンポーネント内のすべての要素スタイルを操作できるようにしたい（my-tag内のHTMLマークアップ）。

AngularJSを使用してカスタムタグのスタイルプロパティを操作する方法について、アドバイスや役立つ例はありますか？

javascripthtmlcssangularjsangularjs-directive
41
Roman Dryndik

これでうまくいくはずです。

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

MyApp.directive('myTag', function() {
    return { 
      link: function(scope, element, attributes){
        element.addClass('MyClass');
      }
    }
});
17
Ben

これは、AngularJSがコアCSSスタイルを追加する方法です。

angular.element(document).find('head').prepend('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}</style>');

このコードは、angular.js v1.2.0-rc.2にあります。

編集

カスタムディレクティブでは、このソリューションを使用して、ディレクティブにCSSスタイルシートをバンドルします。

  var outputColorCSS = {
    selector: 'span.ouput-color',
    rules: [
        'display: inline-block',
        'height: 1em',
        'width: 5em',
        'background: transparent',
        'border: 3px solid black',
        'text-align: center',
        'font-weight: bold',
        'font-size: 0.8em'
    ]
  };
  var outputColorStyleSheet = outputColorCSS.selector + outputColorCSS.rules.join(';');
  angular.element(document).find('head').prepend('<style type="text/css">' + outputColorStyleSheet + '</style>');

その後、ディレクティブテンプレートでclass="ouput-color"を使用できます。

とてもきれいで便利だと思いました。

15
Andrei

私はパーティーに少し遅れていますが、なぜあなたはすべて組み込みの.css（）メソッドを使用していないのですか？

ただ使用する：

link: function(scope, elem, attr, ctrl)
{
    elem.css({'display': 'block', 'height': '100%', 'width': '100%'});

}

またはあなたが望むどんなCSS。

13
Porlune

例示したように、パラメーターを使用してディレクティブの宣言にカスタムスタイルを配置できます。

そのようなスタイルを宣言するには、カスタムスタイルを保持する変数を定義する必要があります。

scope: {
    myClass: '@myClass'
  },

そして、次のように、ディレクティブのテンプレートでそのパラメーターを設定します。

<my-tag my-class="CustomClass"></my-tag>

最後に、ディレクティブ自体のテンプレートで、そのクラスを参照します。

<h1 class="{{myClass}}">{{myContent}}</h1>

ディレクティブのスタイルをカスタマイズする方法を示すプランカーを作成しました こちらをご覧ください 。

7
Julian

Plunker

属性ディレクティブを介してcssスタイルを操作するには、次のようなことができます。

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

app.directive('styleChanger', function() {
  return {
    'scope': false,
    'link': function(scope, element, attrs) {
      var someFunc = function(data)
      {
        /* does some logic */
        return 'background-color:' + data;
      }
      var newStyle = attrs.styleChanger;
      scope.$watch(newStyle, function (style) {
        if (!style) {
          return ;
        }
        attrs.$set('style', someFunc(style));
      });
    }
  };
});

いくつかのhtml：

<div ng-app="colorSwap">
  <input type="txt" ng-init="colorName= 'yellow'" ng-model="colorName" />
  <div style-changer="colorName">this is the div content</div>
</div>

要素ディレクティブを作成するには、次のような独自のスタイルを変更します。

app.directive('elementWithStyle', function() {
  return {
    'restrict' : 'E',
    'scope': {},
    'controller': function($scope) {
      $scope.someStyle = 'Cyan';
      $scope.someFunc = function() { $scope.someStyle = 'purple' };
    },
    'template': '<div style="background: {{someStyle}}" ng-click="someFunc()"> click me to change colors </div>'
  }
});

そして、html：

<div ng-app="colorSwap">
  <element-with-style>123</element-with-style>
</div>

これがお役に立てば幸いです。残りの答えは、クラスの操作を多かれ少なかれカバーしています。

6
peppydip

ディレクティブの子内部でのCSS操作については、これを試してください：

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

MyApp.directive('myTag', function() {
    return { 
      link: function(scope, element, attr){

       // For your tag
       element.addClass('MyClass');

       // For elements inside your directive tag
       var tag_childs = element[0].childNodes;
       for(var i = 0; i < element[0].childElementCount; i++){

          tag_childs[i].style.height = '70px';

        }

      }
    }
});
3
Germando

以下に例を示します。これはおそらくAngularJSの最適な使用方法ではなく、宣言型であるため、クラスをマークアップに配置したいだけです。ただし、何が起こっているのかを理解するために、最初に尋ねたものを実行するための簡単なディレクティブを示しましょう。

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

MyApp.directive('myTag', function($compile) {
    return {
        restrict: 'E', // this means it will be an element
        link: function(scope, element, attrs, ctrl) {
            // First, I included the $compile service because it will be needed
            // to compile any markup you want to return to the element.

            // 1. Add the class, as you wanted
            element.addClass('MyClass');

            // 2. Add markup
            var html = '<div>Hello World</div>';
            //Compile it and add it back
            $compile(html)(scope);
            element.html(html);
        }
    };
});

最後に、マークアップで、これを次のように配置します。

<my-tag />
2
francisco.preller

角度

app.directive("time",function(){
            var directive={};
            directive.restrict="A";
            directive.link=function(scope,element,attr,ctrl){                   
                element.css({
                    backgroundColor:'#ead333'
                });
            }
            var time=new Date().toTimeString();
            directive.template=time;
            return directive;
        });

[〜＃〜] html [〜＃〜]

The times is <span time></span>
1
Rajat Sawant
app.directive('bookslist', function() {

    return {
        scope: true,
        templateUrl: 'templates/bookslist.html',
        restrict: "E",
        controller: function($scope){

        },
        link: function(scope, element, attributes){
        element.addClass('customClass');
      }

    }

});
.customClass table{
        background: tan;

}
.customClass td{
        border: 1px solid #ddd;

}
<!DOCTYPE html>
<html>

<head>
    <link href="app.css" rel="stylesheet">
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <title>Task</title>
</head>

<body ng-app="app">
    <div ng-controller="myCtrl">
      
         <bookslist></bookslist>


    </div>
</body>

</html>
1
Mahesh K

私はまだ完璧な解決策を見つけられませんでしたが、私は John Papaのスタイリング ディレクティブを使用したコントローラーでもフォローしています：

  • ディレクティブはフォルダーです（directiveName.directive）
  • 内部の3つのファイル：directiveName.directive.js、directiveName.template.html、directiveName.styles.css
  • ディレクティブを宣言するときにtemplateUrlを使用します。通常どおり、テンプレートにはcssファイルへのリンクがあります

私はそれが非常にきれいであることがわかり、パターンに従っています。悪い点は、レンダリングされたHTMLのディレクティブの近くにいくつかの<link>タグを作成することです（ただし、まだ問題ではないようです）。 このコメント もチェックしてください。

そうは言っても、 Angular 1.5コンポーネント を見てください。それは比較的新しく、より良いアプローチを持っています。現在、DOM操作にのみディレクティブを使用しています（コンポーネントとしての再利用性ではありません）。

0
Z. Khullah