web-dev-qa-db-fra.com

Comment appliquer la directive AngularJS au style CSS?

En supposant que j'ai une directive "mydirect" avec un modèle qui contient beaucoup de divs avec beaucoup de classes imbriquées. Par exemple:

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

J'ai remarqué que malgré les noms de classe dans un fichier css ("mydirectstyle.css") et qu'il soit inclus dans index.html, en utilisant ma directive:

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

Aucune des propriétés CSS ne lui est appliquée. Quelle est la meilleure façon d'appliquer tous mes styles à ces multiples classes? Peut-il être fait de telle sorte que je n'ai pas à sélectionner manuellement chaque élément et définir des propriétés CSS individuelles?

Ma page index.html contient un <mydirect> </mydirect> qui est remplacé par le modèle de directive ci-dessus.

cssangularjs
22
Rolando

Il est beaucoup plus facile d'utiliser des noms d'éléments réels pour créer des directives dans votre DOM plutôt que d'essayer d'utiliser la méthode de classe. Pour deux raisons: 1) il est beaucoup plus lisible d'avoir <mydirect> contre <div class="mydirect"> et 2) vous pouvez obtenir la même facilité de style en utilisant simplement la syntaxe css appropriée.

Laissez votre directive telle qu'elle est, sauf changez-la en restrict: 'EA' (documents pour cela ici ) et replace: false, comme illustré ici:

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

Voici les options que vous pouvez maintenant utiliser et comment configurer le CSS correspondant pour obtenir les styles que vous souhaitez, comme indiqué dans this jsbin :

enter image description here

J'espère que ça t'as aidé.

55
tennisgent

Selon google sous et Angular Dans l'objet de description de l'exemple ci-dessous, définissant deux composants de configuration. Premièrement, nous définissons l'option restrict config. L'option restrict est utilisée pour spécifier comment une directive peut être invoqué sur la page.

Comme nous l'avons vu précédemment, il existe quatre façons différentes d'invoquer une directive, il existe donc quatre options valides pour restreindre:

'A' - <span ng-sparkline></span> 
'E' - <ng-sparkline></ng-sparkline> 
'C' - <span class="ng-sparkline"></span> 
'M' - <!-- directive: ng-sparkline -->
4
ashutosh

Directive angulaire avec CSS personnalisé.

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;

}
4
Mahesh K

Je pense que la solution à cela est simple. Mais ce n'est qu'une supposition. Vous définissez la directive en utilisant:

<div class="mydirect></div>

et dans votre définition de directive, vous utilisez:

restrict: 'E'

La directive n'est pas rendue par Angularjs car Angularjs recherche quelque chose comme:

<mydirect></mydirect>

Changez simplement restrict: 'E' à restrict: 'C'.

3
bekite