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?

Answer 1

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

Answer 2

您可以使用以下代码：

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

Answer 3

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