Angular directive set element attributes

Question

I have the following directive:

angular.module('app').directive("layer", function () {
    return {
        restrict: 'E',
        templateUrl: 'tpl/directive/layers.html',
        scope:{
            width: '=',
            height: '='
        }

    }
});

The template is simply a canvas:

<canvas style="position: relative;" class=" " height="" width="" ></canvas>

Now as you might have guessed i wish to set the canvas width and height equal to the attributes set on the <layer> element

im just not quite sure how to do this?

you could use {{width}} & {{heigh}} where ever you want to set it on template 'tpl/directive/layers.html' like width="{{width+ 'px'}}" & height="{{height+ 'px'}}" — Pankaj Parkar
– Pankaj Parkar, Commented Jun 6, 2015 at 18:17
I really dont get it, you have a directive "layer" with element restriction and element you are using is canvas — Nikhil Aggarwal
– Nikhil Aggarwal, Commented Jun 6, 2015 at 18:17

krivtom · Accepted Answer · 2015-06-06 18:17:31Z

1

You can use the following code:

<canvas style="position: relative;" class=" " height="{{height}}" width="{{width}}" ></canvas>

answered Jun 6, 2015 at 18:17

krivtom

25k10 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marc Rasmussen Over a year ago

Does this also work when i use '=' or should i use @?

krivtom Over a year ago

@MarcRasmussen @ is used to access string values and = is used to create a two way binding with parent scope. It seems that in your directive you only want to pass the value to the directive, so in your case you can use either approach

Jeffrey A. Gochin · Accepted Answer · 2015-06-06 18:17:22Z

1

<canvas style="position: relative;" class=" " height="{{height}}" width="{{width}}" ></canvas>

answered Jun 6, 2015 at 18:17

Jeffrey A. Gochin

9646 silver badges18 bronze badges

Comments

Omri Aharon · Accepted Answer · 2015-06-06 18:23:29Z

1

It pretty much depends on how you defined your HTML and how you wrote the attributes, but you can achieve it like this (changed canvas to button to illustrate it clearer):

myApp.directive("layer", function () {
    return {
        restrict: 'E',
        template: '<button style="height:{{height}}px; width: {{width}}px;" class="">This is my button</button>',
        scope:{
            width: '@',
            height: '@'
        }

    }
});

Fiddle

answered Jun 6, 2015 at 18:23

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

Angular directive set element attributes

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related