Comment manipuler les styles de la directive dans AngularJS?
Je suis à l'écriture d'un composant en utilisant AngularJS et directives AngularJS.
Je suis en train de faire quelque chose comme ceci:
var MyApp = angular.module('MyApp', []);
MyApp.directive('myTag', function() {
return { /* Some logic here*/ }
});
Je veux être en mesure de changer le style de mon composant (à l'aide de CSS), quelque chose comme ceci:
<my-tag class="MyClass"></my-tag>
En plus de cela, je veux être capable de manipuler tous les éléments de style à l'intérieur de mon
composant (balises HTML à l'intérieur de mon-tag).
Avez-vous des conseils ou des exemples utiles comment manipuler les propriétés de style des balises personnalisées en utilisant AngularJS?
- Je ne suis pas sûr de ce que exactement vous dire de changer les styles. Il y a déjà
ng-style
etng-class
pour cela. - Parlez-vous des styles ou classes? Il y a une grosse différence. La manipulation de classes est facile. Styles, pas tellement.
Vous devez vous connecter pour publier un commentaire.
Cela devrait faire l'affaire.
C'est de cette façon AngularJS ajoute de base des styles CSS:
Vous pouvez trouver ce code dans angular.js v1.2.0-rc.2.
MODIFIER
Coutumier de la directive, j'utilise cette solution pour regrouper les feuilles de style CSS dans la directive:
Ensuite, vous pouvez utiliser
class="ouput-color"
dans votre directive modèles.Je l'ai trouvé très propre et utile.
... outputColorCSS.selector + '{' + outputColorCSS.rules.join(';') + '}';
<style>
bloc sera ajouté à<head>
à chaque utilisation de votre directive!Je suis un peu en retard à la fête, mais pourquoi n'êtes-vous pas tout en utilisant le construit en .css() la méthode?
suffit d'utiliser:
ou quoi que css que vous désirez.
$(elem[0]).css({...})
Vous pouvez mettre des styles personnalisés dans une directive de la déclaration avec un paramètre, tout comme vous illustrée.
Afin de déclarer un style comme cela, vous devez définir une variable pour contenir les styles personnalisés:
Puis définissez ce paramètre dans la directive du modèle, comme ceci:
Enfin, dans le modèle de la directive elle-même, de référence de la classe:
J'ai fait un plunker qui montre comment vous pouvez personnaliser les styles dans une directive, découvrez-le ici .
Plunker
Pour manipuler le style css par le biais d'un attribut de la directive, vous pourriez faire quelque chose comme ceci:
Html:
Pour en faire un élément de la directive, de changer son propre style, quelque chose comme ceci:
Et le code html:
J'espère que cette aide. Le reste des réponses de la classe d'occupation des manipulations plus ou moins.
Pour css de manipulation à l'intérieur de l'enfant de votre directive essayez ceci:
Voici un exemple, veuillez noter que ce n'est probablement pas la meilleure utilisation d'AngularJS, étant déclarative, vous voudrez probablement juste de mettre les classes sur le balisage. Toutefois, si vous voulez comprendre ce qui se passe, laissez-moi vous montrer une directive simple pour faire ce que vous avez d'abord demandé.
Enfin, sur la marge, il suffit de mettre ceci dans:
JS:
CSS:
HTML:
Angulaire
HTML
Je n'ai pas trouvé la solution parfaite, mais je suis John Papa style de contrôleurs de même avec les directives:
Je l'ai trouvé très propre et suit un modèle. Le mauvais côté c'est que vous créez plusieurs
<link>
balises de près les directives dans le rendu HTML (ne semble pas être un problème encore, tout de même). Découvrez ce commentaire trop.Cela étant dit, jetez un oeil à Angulaire de 1,5 composant. C'est relativement nouveau et a une bien meilleure approche. Maintenant, j'utilise directives pour la manipulation DOM (pas de réutilisation en tant que composants).