22

多くの入れ子になったクラスを持つ多くの div を含むテンプレートを持つディレクティブ "mydirect" があると仮定します。例えば：

<div class="mydirect">
  <div class="classA">
    <div class="subclassA">
      <div class="subclassB">
      </div>
    <div class="classB"></div>
</div>

クラス名がcssファイル（「mydirectstyle.css」）にあり、index.htmlに含まれているにもかかわらず、ディレクティブを使用していることに気付きました：

angular.module("MyApp", []).
  directive('mydirect', function() {
    return {
      restrict: 'E',
      replace: true,
      template: '-All that Html here-'
    };
  });

CSS プロパティはまったく適用されません。これらの複数のクラスにすべてのスタイルを適用する最良の方法は何ですか? 各要素を手動で選択して個々の CSS プロパティを設定する必要がないようにすることはできますか?

私の index.html ページには、<mydirect> </mydirect>上記のディレクティブ テンプレートに置き換えられる が含まれています。

4

4 に答える 4

55

Its much easier to use actual element names to create directives in your DOM rather than trying to use the class method. For two reasons: 1) its much more readable to have <mydirect> vs <div class="mydirect"> and 2) you can get the same ease of styling by just using the proper css syntax.

Leave your directive just the way it is, except change it to restrict: 'EA' (docs for that here) and replace: false, as shown here:

.directive('mydirect', function() {
    return {
        restrict: 'EA',
        replace: false,
        template: '-All that Html here-'
    };
});

Here are the options you can now use and how to configure the corresponding CSS to get the styles you want, as shown in this jsbin:

enter image description here

Hope that helps.

于 2013-10-25T00:07:43.000 に答える
5

カスタム CSS を使用した Angular ディレクティブ。 

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: #ddd;

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

}

于 2016-08-31T11:31:54.657 に答える
4

Google の下および Angular ディレクティブ作成ロジックに従って、以下の例の説明オブジェクトでは、2 つの構成コンポーネントを設定します。まず、restrict config オプションを設定します。restrict オプションは、ページでディレクティブを呼び出す方法を指定するために使用されます。

前に見たように、ディレクティブを呼び出すには 4 つの異なる方法があるため、restrict には 4 つの有効なオプションがあります。

'A' - <span ng-sparkline></span> 
'E' - <ng-sparkline></ng-sparkline> 
'C' - <span class="ng-sparkline"></span> 
'M' - <!-- directive: ng-sparkline -->
于 2015-10-16T15:45:20.123 に答える