web-dev-qa-db-fra.com

Comment manipuler les styles de directive dans AngularJS?

J'écris un composant en utilisant les directives AngularJS et AngularJS.

Je fais quelque chose comme ça:

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

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

Je souhaite pouvoir modifier le style de mon composant (à l'aide de CSS), par exemple:

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

En plus de cela, je veux pouvoir manipuler tous les éléments de style dans mon composant (Balise HTML dans my-tag).

Avez-vous des conseils ou des exemples utiles sur la manière de manipuler les propriétés de style des balises personnalisées à l'aide d'AngularJS?

javascripthtmlcssangularjsangularjs-directive
41
Roman Dryndik

Cela devrait faire l'affaire. 

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

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

Voici comment AngularJS ajoute les principaux styles 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>');

Vous pouvez trouver ce code dans angular.js v1.2.0-rc.2.

MODIFIER

Dans une directive personnalisée, j'utilise cette solution pour regrouper des feuilles de style CSS dans la directive:

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

Ensuite, vous pouvez utiliser class="ouput-color" dans vos modèles de directive.

Je l'ai trouvé très propre et utile.

15
Andrei

Je suis un peu en retard à la fête, mais pourquoi n'utilisez-vous pas la méthode .css () intégrée?

juste utiliser:

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

}

ou css que vous désirez.

13
Porlune

Vous pouvez mettre des styles personnalisés dans la déclaration d'une directive avec un paramètre, comme vous l'avez illustré.

Pour déclarer un style comme celui-là, vous devez définir une variable pour contenir les styles personnalisés:

scope: {
    myClass: '@myClass'
  },

Et puis définissez ce paramètre dans le modèle de la directive, comme ceci:

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

Enfin, dans le modèle de la directive elle-même, référencez cette classe:

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

J'ai fait un plunker qui montre comment vous pouvez personnaliser les styles dans une directive, consultez-le ici .

7
Julian

Plunker

Vous êtes ici pour manipuler le style de votre 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));
      });
    }
  };
});

Některé 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>

Merci beaucoup, soyez le premier à donner votre avis!

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

Un html:

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

Doufám, že to pomůže. Zbytek odpovědí pokrývá třídní manipulaci víceméně.

6
wolfdawn

Pour manipuler les CSS à l'intérieur des enfants de votre directive, essayez ceci:

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

Voici un exemple, veuillez noter que ce n’est probablement pas la meilleure utilisation d’AngularJS, étant déclaratif, vous voudrez probablement simplement mettre les classes sur le balisage. Cependant, pour que vous compreniez ce qui se passe, laissez-moi vous montrer une directive simple pour faire ce que vous avez demandé en premier.

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

Enfin, dans votre balisage, vous venez de mettre ceci dans:

<my-tag />
2
francisco.preller

angulaire 

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

Je n'ai pas encore trouvé la solution idéale, mais je suis les style de John Papa des contrôleurs même avec des directives:

  • la directive est un dossier (directiveName.directive)
  • 3 fichiers dans: directiveName.directive.js, directiveName.template.html, directiveName.styles.css
  • utilisez templateUrl lors de la déclaration de la directive. Le modèle a le lien vers le fichier css, comme d'habitude

Je l'ai trouvé très propre et suit un modèle. L'inconvénient est que vous créez plusieurs balises <link> près des directives dans le code HTML affiché (cela ne semble toutefois pas être un problème). Découvrez ce commentaire aussi.

Cela étant dit, jetez un coup d'oeil à composant angulaire 1.5 }. C'est relativement nouveau et a une bien meilleure approche. Maintenant, je n'utilise que des directives pour la manipulation du DOM (pas de possibilité de réutilisation en tant que composants).

0
Z. Khullah