角指令集元素属性

Question

我有以下指令：

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

    }
});

模板只是一个canvas

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

现在，正如您可能已经猜到的，我希望将画布宽度和高度设置为<layer>元素上设置的属性

我只是不太确定该怎么做？

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

这在很大程度上取决于您如何定义HTML和如何编写属性，但您可以这样实现它(将画布改为按钮以更清楚地说明它)：

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: '@'
        }

    }
});

小提琴