How to style a directive from the outside?

Question

I have a directive which I want to customize with style attribute from where I invoke it, as follows:

<plant-stages style="-webkit-transform: scale(.8); border: solid blue 1px"
    stages="stages"
    affectedstages="accident.stages"
    change-page="changePage(stage)"
    title="Les étapes du cycle suceptibles d'être affectées"
    subtitle="Taper sur une des étape de la plante pour obtenir des informations détaillées"
></plant-stages>

By passing in style attributes, I'd like they apply to the resulting HTML from the directive, as any standard HTML directive would do.

The partial code snippet is as follows:

<figure class="cornStages">
    <div></div>
</figure>

And the directive itself is as follows:

app.directive('plantStages', function ($compile) {
    return {
        restrict: 'E',
        templateUrl: 'corn.figure.plant.stages.html',
        transclude: true,
        scope: { 
            stages: "=",
            affectedstages:"=",
            changePage: "&",
            title: "@",
            subtitle : "@"
        },

Any idea?

score 1 · Accepted Answer · answered May 08 '14 at 11:03

1

One option could be to store the style in the scope by adding style: '@' in the definition of the scope of the directive and then to add ng-style="style" in your template.

I've made a working example on JS Fiddle.

The code is the following:

HTML

<div ng-app="myApp">
    <my-little-directive style="color: red"></my-little-directive>
    <my-little-directive style="color: blue"></my-little-directive>
    <my-little-directive style="-webkit-transform: scale(.8); border: solid blue 1px"></my-little-directive>
</div>

Javascript

angular.module('myApp',[]).directive('myLittleDirective', function() {
   return {
        restrict: 'E',
       template: '<div ng-style="style">{{style}}</div>',
        replace: true,
        scope: { 
            style : "@"
        },
};
});

answered May 08 '14 at 11:03

Julien

2,256
3
26
31

Weird enough, that was my first idea which I tried without success. I give it a try again as I saw your fiddle working. Keep posted :-) What's the purpose of the replace: true btw? – Stéphane de Luca May 08 '14 at 12:17
If it's not working in your code, I'm afraid that you'll have to post a plunker/jsfiddle reproducing the issue. ^^" – Julien May 08 '14 at 12:18
It works nice, the only difference I had is I hadn't put the replace:true. Can you quickly tell me what it does? – Stéphane de Luca May 08 '14 at 12:27
Take a look at this question: http://stackoverflow.com/questions/15285635/how-to-use-replace-of-directive-definition :) – Julien May 08 '14 at 12:30
Understood. Yet I wonder the very difference with transclude (concepts are not yet all very clear to me, need more experience :-) ) – Stéphane de Luca May 08 '14 at 12:38
With `transclude`, the directive will delete the original content, but it will be available for reinsertion within the template through the use of the directive `ng-transclude`. I've never really use that except for looking what it was doing ^^" – Julien May 08 '14 at 12:46

How to style a directive from the outside?

1 Answers1